javascript - Ruby on Rails - 编辑/更新显示布局上的内容

Question

我正在尝试找出如何实现一个系统，该系统允许我更新某些字段，而无需离开当前页面，也无需重新加载它。

我在很多网站上都看到过这种情况，包括在 StackOverflow 上编辑评论。

示例:

您撰写并发布了评论。查看所有发布的评论时，有一个“编辑”按钮，可以将评论更改回原位的text_area，让您可以更新文本，以及保存它的按钮。然后，更新后的 Comment 看起来是正确的，您无需导航或刷新。

我相信他们正在做的是:

1. 当您点击“编辑”按钮时，Javascript 将使用 text_area 生成/显示隐藏布局。
2. 点击“保存”将在后台发送请求，而无需刷新屏幕。
3. Javascript 将获取更新后的文本并将其复制到旧布局中，然后显示。

有什么好的例子可以说明如何实现这一点吗？我什至不确定这种更新使用什么术语。

感谢您的帮助。

Answer 1

有很多例子可以实现您的目标。

请尝试给您一个简单的示例，以便您更好地理解。

假设您有一个 Post 模型

class Post
end

您的索引页面如下所示(在 Controller 索引中@posts = Post.all

<% #app/views/posts/index.html.erb %>
<div id="posts">
  <%= render @posts %>
</div>

帖子对象部分:

<% #app/views/posts/_post.html.erb %>
<div id="<%= dom_id(post)%>">
  <%= post.title %>
</div>

并使用远程属性更新您的 form_for 标记

form_for @post, remote: true

现在您的创建可以将当前帖子添加到 div#posts 或替换整个 div。

<% #app/views/posts/create.js.erb %>
$("#posts").append('<%=j(render @post)%>') 

您的更新可以通过将 div 替换为更新帖子的 dom_id() 来更新一个条目。

<% #app/views/posts/update.js.erb %>
$("#posts ##{dom_id(@post)}").html('<%=j(render @post)%>') 

仅此而已。