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

时间:2018-11-18 22:40:17

标签: jquery ruby-on-rails ruby ruby-on-rails-5

我有一个具有喜欢/不喜欢功能的评论模型,当我第一次喜欢任何评论时,它可以正常工作,因为like链接是使用初始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中不相同的链接部分更改为注释/ 4 /不一样。可能会发生什么错误而导致这种情况发生?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

您的回调应该以固定的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做相反的操作):

$("." + "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....
});

让我知道它是否有效。