javascript - 使用 Ajax 更新 Rails 中的 'like' 计数

Question

我研究了许多关于这个主题的其他帖子，但似乎找不到符合我的场景的帖子。

我的网站有帖子，用户可以喜欢这些帖子，从而增加喜欢计数。如果我在没有 Ajax 的情况下执行此操作并且仅使用页面刷新，则计数器会正确递增并且按钮会根据需要更改颜色。事实上，我的 Ajax 代码在单击时更改按钮的颜色，只是点赞数没有增加。

服务器日志似乎也显示该请求正在作为 JS 处理并持久化到数据库，那么为什么计数没有被刷新呢？

likes_controller.rb

def create
    @post = Post.find(params[:post_id])
    @like = @post.likes.create(user_id: current_user.id)
    respond_to do |format|
      format.html {redirect_to :back}
      format.js {}
    end
end

def destroy
    @like = Like.find_by(post_id: params[:post_id], user_id: params[:user_id]).destroy
    respond_to do |format|
      format.html {redirect_to :back}
      format.js {}
    end
end

_like_post.html.erb

<% if current_user.already_likes?(post) %>
    <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, like_path(post_id: post.id, user_id: current_user.id), method: :delete, class: 'btn btn-default stat-item active', id: "unlike-post", remote: true %>
<% else %>
    <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, likes_path(post_id: post.id), method: :post, class: 'btn btn-default stat-item', id: "like-post", remote: true %>
<% end %> 

创建.js.erb

$("#unlike-post").show();

destroy.js.erb

$("#like-post").show();

编辑:

我最初遇到解决方案错误，因为我的 likes 路由未嵌套在帖子中。我更改了这一点，并更改了后续的类似和不同路径以反射(reflect)嵌套更改(分别更改为 post_likes_path 和 post_like_path)。我还将 Like Controller 中的 destroy 方法调整为 @like = Like.find(params[:id]).destroy。最后，我将@like作为变量传递到unlike路径中，以便整个路径读取:post_like_path(@like, post_id: post.id)

Answer 1

当您通过 create.js.erb 和 destroy.js 喜欢或不喜欢帖子时，需要重新呈现部分文件 _like_post.html.erb。 erb

您有 $("#unlike-post").show(); 但它不会更新页面中的任何内容； .show() 只(等效地)将元素的 css 更改为 display: block。

话虽如此，下面的内容应该可以使其发挥作用

_like_post.html.erb

<div id='like-post-container'>
  <% if current_user.already_likes?(post) %>
      <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, like_path(post_id: post.id, user_id: current_user.id), method: :delete, class: 'btn btn-default stat-item active', id: "unlike-post", remote: true %>
  <% else %>
      <%= link_to "<i class='fa fa-thumbs-up icon'></i>#{post.likes.count}".html_safe, likes_path(post_id: post.id), method: :post, class: 'btn btn-default stat-item', id: "like-post", remote: true %>
  <% end %>
</div>

创建.js.erb

$('#like-post-container').html('<%= j render partial: "likes/like_post", locals: {post: @post} %>');

销毁.js.erb

$('#like-post-container').html('<%= j render partial: "likes/like_post", locals: {post: @like.post} %>');

请注意，此方法将重新创建元素。如果这些元素上有 JS 绑定(bind)，它将被删除，并且可能无法正常工作。如果您有绑定(bind)，那么您必须直接更新计数值，而不是像我上面的实现那样。