在Rails中使用AJAX link_to渲染部分內容

Question

完成Hartl的教程后，我嘗試為Micropost模型實現@replies。

我想要微博上的回復按鈕，以將微博表單呈現在該微博下的Twitter Twitter下。 我還想將上述帖子的：micropost_id傳遞給回復，以便稍后可以引用是回復的帖子，再次是推特。

我一直在嘗試根據對這個問題的答案來實現其中的一些。

我的微博控制器有

def reply_form

    respond_to do |format|
      format.js
    end
  end

視圖中的鏈接是

<%= link_to 'reply', 'shared/reply_form', remote: true, locals: { object: :id } %>

我試圖在那里傳遞微帖：id

發布后，我有這個部分渲染：

<div id="ReplyContainer"></div>

然后我有_reply_form.js.erb

$('#ReplyContainer').html('<%=j render partial: 'shared/reply_form', locals: { object: :id } %>')

它不會引發錯誤，但是單擊“答復”鏈接無效，並且不會呈現_reply_form.html.erb部分。

我的最終目標是單擊回復，從而呈現微博表單，並在消息的開頭（從micropost_id派生？）添加@username提交該表單，然后將新微博（包括原始博文的微post_id）保存在reply_to列中是我在微博表格中創建的。 任何朝着正確方向前進的人都非常感激。 不想被完全錯誤的樹絆倒。 謝謝。

編輯：單擊答復鏈接時，我當前收到路由錯誤。

(No route matches [GET] "/shared/reply_form")

但據我所知，一切都在正確的地方。

Answer 1

好的，對不起，我已經更好地閱讀了您的問題，該問題與錯誤的結構有關。

• 您有一個控制器，該控制器的操作將呈現該帖子
• 您的帖子頁面將由“帖子”和許多回復組成
• 我猜每個答復都是部分答復（例如_reply.html.erb文件）。

頁面的結構如下：

<div>
 ... my post here...
</div>
<div id='repliesContainer'>
<%- @replies..each do |id| -%>
    <%= render :partial => "shared/reply", :locals => { :object => id} %>
<%- end -%>
</div>

我們將其post.html.erb 。

這將是您的shared/_reply.html.erb文件：

  // note here that the id of the div contains the ID of the reply: each ID must be unique in the page....
  <div id='ReplyContainer-#{object}'>
    ...reply content here...
  </div>

現在，您的post.js.erb文件包含以下內容：

$('#repliesContainer').append("<%= escape_javascript( render :partial => 'shared/reply', :locals => { :object => id}) -%>");

append()函數的內容將以字符串形式顯示在服務器上。

Answer 2

您在這里遇到幾個問題：

1. 如您所知，回復表格的路徑不正確。 在解決此問題之前，您將無法調試系統的其余部分。 運行rake routes | grep reply_form rake routes | grep reply_form來找到它的URL（很有可能不會在/ shared下），然后查看對該URL的響應是什么。 我敢打賭它會引發錯誤（請參閱＃2）。

2. 您的回復表單文件名稱錯誤： _reply_form.js.erb是局部的，但必須為'reply_form.js.erb'。 如果您為該控制器選擇了正確的路線，則會收到“缺少模板”錯誤，因為它正在尋找普通模板，而不是局部模板。

3. 最后， reply_form.js.erb代碼需要指向共享的reply_form部分，因此，如果確實在shared/_reply_form.html.erb ，則應正確呈現JS響應。

話雖如此...我真的不喜歡將Javascript發送回瀏覽器，部分原因是它使調試JS變得更加困難-您將如何在瀏覽器調試器中找到返回的代碼？ 這種設計可能會有一些用例，但是它們可能非常少見。

更好/更多的idomatic解決方案是將JSON數據（例如，呈現的文本）發送回瀏覽器，並讓一些處理程序解析JSON並更新DOM。 這樣，所有的JS代碼都顯示在瀏覽器中，而您接收的只是數據。 這將更容易調試。