Ruby on Rails-在顯示布局中編輯/更新內容

Question

我正在嘗試找出如何實現一個系統，該系統允許我更新某些字段而無需離開當前頁面，也無需重新加載它。

我已經在很多網站上看到了這一點，包括在StackOverflow上編輯評論。

例：

您撰寫並發表了Comment 。 在查看所有已發布的Comments ，有一個“編輯”按鈕，可將該Comment回到適當的text_area位置，允許您更新文本，還有一個按鈕用於保存文本。 然后，更新后的Comment看起來正確，您無需導航或刷新。

我相信他們正在做的是：

1. 當您單擊“編輯”按鈕時，Javascript正在使用text_area生成/顯示隱藏的布局。
2. 點擊“保存”將在后台發送請求，而不刷新屏幕。
3. Javascript將獲取更新的文本並將其復制到舊的布局中，並進行顯示。

有沒有很好的例子來實現這一目標？ 我什至不確定這種更新使用了什么術語。

謝謝你的幫助。

Answer 1

有許多示例可以實現您的目標。

請嘗試給我一個簡單的例子，以使您更好地理解。

假設您有一個Post模型

class Post
end

您的索引頁面如下所示（在控制器索引@posts = Post.all

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

post對象的局部：

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

並使用remote屬性更新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)%>') 

就這樣。