Как мне указать конкретную форму в Rails 3.2 с UJS, когда на странице несколько форм?

Question

У меня есть частичный, содержащий много постов и много комментариев. Я хотел бы обновить страницу через 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, если хочешь.