javascript - 导轨 : accessing a non-instance variable in js. erb

Question

我有一个呈现多个表单的页面。目前，当用户提交这些表单中的任何一个时，它都会使用刚刚提交的表单中的内容更新(通过 ajax)同一页面上的 div。

我还想remove()在ajax post请求完成后刚刚提交的表单元素。但是，我需要能够访问 js.erb 文件中的特定表单 ID 才能执行此操作。

由于我的页面有 x 个动态呈现的表单，因此我无法简单地访问 js.erb 中的实例变量。

页面:

<% for peer_review in @peer_reviews %>
    <%= render :partial => 'form', :locals => { :peer_review => peer_review } %>
<% end %>

<div id="completed_peer_reviews">
    <%= render 'completed_peer_reviews' %>
</div>

@peer_reviews 实例变量包含已包含一些数据的新 PeerReview 对象的数组。

表格:

<div id="peer_review_form_<%= peer_review.reviewee_id %>">
<%= form_for peer_review, :html => { :method => "post" }, :remote => true do |f| %>
  <%= f.error_messages %>
  <p>
    Peer Review for: <%= User.find(peer_review.reviewee_id).name %><br />
  </p>
  <p>
    <%= f.label :rating %>: 
    <%= f.select :rating, [1, 2, 3, 4, 5], { :include_blank => 'None' } %>
  </p>
  <p>
    <%= f.label :review %><br />
    <%= f.text_area :review %>
  </p>

  <%= f.hidden_field :user_id, :value => peer_review.user_id %>
  <%= f.hidden_field :reviewee_id, :value => peer_review.reviewee_id %>
  <%= f.hidden_field :review_period_id, :value => peer_review.review_period_id %>

  <p><%= f.submit "Submit" %></p>
<% end %>
</div>

js.erb:

$("#completed_peer_reviews").html("<%= escape_javascript(render('completed_peer_reviews')) %>");

我希望在 js.erb 文件中添加另一行，以删除刚刚触发 js.erb 文件执行的表单元素，如下所示:

$("#peer_review_form_<%= peer_review.reviewee_id %>").remove();

我实际上应该如何在这里引用peer_review.reviewee_id？或者我应该采取完全不同的方法？

Answer 1

这是RJS模板的经典问题之一。

快速回答:

如果您只是想解决问题，您可以传递一些临时 ID 来识别表单。例如:

# in the index
<% @peer_reviews.each.with_index do |peer_review, i| %>
  <%= render :partial => 'form', 
             :locals  => { :peer_review => peer_review, :i => i } %>
<% end %>

# then in the form (note, you don't need to specify POST in a form_for)
<div id="peer_review_form_<%= i %>">
  <%= form_for peer_review, :remote => true do |f| %>
    <%= hidden_field_tag 'temp_id', i %>

# finally in the create js.erb
$("#peer_review_form_<%= params[:temp_id] %>").remove();

<小时/>

更长的答案:

话虽这么说，虽然 RJS 模板在很长一段时间内都是“Rails 方式”，但后来它们已经失宠了。

更现代的方法通常是带有 JSON API 的客户端 JS 模板，而不是运行服务器生成的 JS 模板 (RJS)。这有很多优点，其中之一是您现在遇到的 DOM 绑定(bind)问题不再存在。

这是一个如何使用纯 jQuery 执行此操作的示例，但有许多模板选项。

<script id="peer_review_tmpl" type="text/x-jquery-tmpl">
  <div class="completed_peer_review">
    <p>${review}</p>
    ...
  </div>
</script>

然后您将创建一个处理程序并将其绑定(bind)到成功的 ajax 响应。这需要您的 peer_reviews#create 操作响应 JSON:

$('form.new_peer_review').bind("ajax:success", function(data) {
  // remove the form which triggered the creation        
  $(this).remove();

  // then render the data into a template, and append it to the list
  $("#peer_review_tmpl").tmpl(data).appendTo("#completed_peer_reviews"); 
});