当页面上有多个表单时，如何使用 UJS 在 Rails 3.2 中指定特定表单？

Question

我有一个包含许多帖子和许多 cmets 的部分。添加评论时，我想通过 UJS 更新页面。但是，现在当我提交新评论时，它会创建一些额外的 div 元素（基于页面上当前有多少评论表单）。我是 UJS 的新手，不知道如何遍历 DOM，以便我可以将评论添加到提交的表单中。以下是我的代码，任何帮助将不胜感激。注意：这是在包含许多帖子的页面中呈现的帖子部分，因此 DOM 上有多个“.comment-form”类。

<article class="post speech-bubble-post">
  <header class="group">

    <div class="post-header-thumb">
      <a href="<%= user_url(post.user) %>">
        <img class="circular-thumb" src="<%= post.user.profile_photo(:thumb) %>" alt="">
      </a>
    </div>

    <div class="user-info">
      <div class="name">
        <%= post.user.full_name %>
      </div>
      <div class="role">
        <!-- user.role_in_course -->
      </div>
      <div class="post-time">
        posted <%= time_ago_in_words(post.created_at) %> ago
      </div>
    </div>
    <% if post.user == current_user || post.course.has_write_permission?(current_user) %>
      <div class="post-controls">
        <div class="post-edit">
          <%= link_to "Edit Post", edit_post_url(post) %>
        </div>
        <form class="post-delete" action="<%= post_url(post) %>" method="POST">
          <input
            type="hidden"
            name="authenticity_token"
            value="<%= form_authenticity_token %>">

          <input
            type="hidden"
            name="_method"
            value="DELETE">

          <input type="submit" value="Delete Post">
        </form>
      </div>
    <% end %>
  </header>

  <p class="post-content">
    <%= post.body %>
  </p>
</article>

<% post.comments.each do |comment| %>
  <div class="comment">
    <%= render comment %>
  </div>
<% end %>

<form 
  class="comment-form" 
  action="<%= post_comments_url(post) %>" 
  method="POST" 
  data-remote="true">

  <input
     name="authenticity_token"
     type="hidden"
     value="<%= form_authenticity_token %>">

  <label for="comment_body"></label>
  <textarea rows="1" cols="50" name="comment[body]" id="comment_body"></textarea>

  <input type="hidden" name="comment[post_id]" value="<%= post.id %>">

  <input type="submit" class="comment-submit-button" value="Comment">
</form>

<script>
$(document).ready(function(event) {

    $(".comment-form ").on("ajax:success", function(event, data){

      var $form = $(this)

      $form.prepend(data);
      $form[0].reset();
    });
});
</script>

Answer 1

你可以这样做

<form id="post-<%= post.id %>" class="comment-form" ...>

或

<form data-post_id="post-<%= post.id %>" class="comment-form" ...>

如果你愿意，然后用 JS 来选择它。