Ruby on Rails 5 js.erb没有被传递当前实例变量

Question

我有一个具有喜欢/不喜欢功能的评论模型，当我第一次喜欢任何评论时，它可以正常工作，因为“喜欢”链接是使用初始html.erb呈现器呈现的。 但是，当我尝试不喜欢或重新喜欢任何东西时，它总是使用指向我喜欢或不喜欢的第一条评论的链接来更新部分内容。

comments_controller.rb

def like
    @comment = Comment.find(params[:id])
    @comment.liked_by current_user
    respond_to do |format|
      format.html { redirect_to :back }
      format.js { render '/comments/like.js.erb' }# layout: false }
    end   
  end

  def unlike
    @comment = Comment.find(params[:id])
    @comment.unliked_by current_user
    respond_to do |format|
      format.html { redirect_to :back }
      format.js { render '/comments/unlike.js.erb' }# layout: false }
    end 
  end

unlike.js.erb

$('.unlike_comment').bind('ajax:success', function(){

   $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @comment.votes_for.size.to_s %>');
   $(this).closest('.unlike_comment').hide();

   $(this).closest('.votes').html(' <%= link_to "", like_comment_path(@comment), remote: true, method: :get, class: 'like_comment glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>');

});

like.js.erb

$('.like_comment').bind('ajax:success', function(){

   $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @comment.votes_for.size.to_s %>');
   $(this).closest('.like_comment').hide();

   $(this).closest('.votes').html(' <%= link_to "", unlike_comment_path(@comment), remote: true, method: :get, class: 'unlike_comment glyphicon glyphicon-chevron-up', :style=>'color: #202020;' %>');

});

以及_comment.html.erb的相关部分

 <comment-body>
      <p>
      <span class="votes">
      <% if logged_in? && (current_user.liked? comment) %>
         <%= link_to "", unlike_comment_path(comment), method: :get, remote: true, class: 'unlike_comment glyphicon glyphicon-chevron-up', :style=>'color: #202020;' %>
      <% elsif logged_in? %>
         <%= link_to "", like_comment_path(comment), method: :get, remote: true, class: 'like_comment glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>
      <% else %>
        <%= link_to "", prompt_login_comment_path(comment), method: :get, remote: true, class: 'prompt_login glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>
      <% end %>

    </span>
    <%= link_to comment.title, comment, class: 'bigger comment-text' %> <%= link_to comment.body, comment, class: 'notbig comment-text' %>
    </p>
    </comment-body>

因此，举例来说，如果我不喜欢注释4，那么就像注释3一样，它将注释3中的“ likelike”链接部分更改为“ comment / 4 / unlike”。 可能会发生什么错误而导致这种情况发生？ 任何帮助是极大的赞赏。

Answer 1

您的回调应以固定的DOM类为目标，否则，每次ajax成功（这就是您所遇到的）时，事件处理程序都会被覆盖。 另外，您只需要更新锚点属性，而无需使用html方法重绘整个锚点。

首先为每个链接创建一个唯一的类，例如comment_1

    <span class="votes">
      <% if logged_in? && (current_user.liked? comment) %>
         <%= link_to "", unlike_comment_path(comment), method: :get, remote: true, class: 'unlike_comment comment_#{comment.id} glyphicon glyphicon-chevron-up', :style=>'color: #202020;' %>
      <% elsif logged_in? %>
         <%= link_to "", like_comment_path(comment), method: :get, remote: true, class: "like_comment comment_#{comment.id} glyphicon glyphicon-chevron-up", :style=>'color: #cecece;' %>
      <% else %>
        <%= link_to "", prompt_login_comment_path(comment), method: :get, remote: true, class: 'prompt_login glyphicon glyphicon-chevron-up', :style=>'color: #cecece;' %>
      <% end %>
    </span>

然后更新unlike.js.erb模板（对like.js.erb做相反的like.js.erb ）：

$("." + "comment_#{@comment.id}").bind('ajax:success', function(){
   // Change class
   $(this).switchClass("like_comment", "unlike_comment");
   // Change path
   $(this).prop("src", "#{like_comment_path(comment)}");
   // anything else....
});

让我知道它是否有效。