javascript - 就像 Ruby on Rails 中的按钮 Ajax

Question

我有一个 Ruby on Rails 项目，其中有一个模型 User 和一个模型 Content，等等。我想让用户“喜欢”一个内容，我用 acts_as_votable 做到了这一点。 gem 。

目前，点赞系统正在运行，但每次按下点赞按钮 (link_to) 时我都会刷新页面。

我想使用 Ajax 执行此操作，以便在无需刷新页面的情况下更新按钮和点赞计数器。

在我的 Content -> Show View 中，这是我拥有的:

<% if user_signed_in? %>
  <% if current_user.liked? @content %>
      <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put %>
  <% else %>
      <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put %>
  <% end %>
  <span> · </span>
<% end %>

<%= @content.get_likes.size %> users like this
<br>

Content Controller 这样做是为了喜欢/不喜欢:

def like
    @content = Content.find(params[:id])
    @content.liked_by current_user
    redirect_to @content
end

def dislike
    @content = Content.find(params[:id])
    @content.disliked_by current_user
    redirect_to @content
end

在我的 routes.rb 文件中，这是我拥有的:

resources :contents do
    member do
        put "like", to: "contents#like"
        put "dislike", to: "contents#dislike"
    end
end

正如我所说，点赞系统运行良好，但在用户按下点赞计数器或点赞按钮后不会更新。相反，为了欺骗它，我在 Controller 操作中调用 redirect_to @content。

我如何使用简单的 Ajax 调用来实现它？还有其他方法吗？

Answer 1

你可以通过多种方式做到这一点，简单的方法是这样的:

准备工作

1. 在您的 application.js 中包含 Rails UJS 和 jQuery(如果尚未这样做的话):

   //= require jquery
   //= require jquery_ujs
   

2. 将 remote: true 添加到您的 link_to 助手:

   <%= link_to "Like", '...', class: 'vote', method: :put, remote: true %>
   

3. 让 Controller 以非重定向方式响应 AJAX 请求:

   def like
     @content = Content.find(params[:id])
     @content.liked_by current_user
   
     if request.xhr?
       head :ok
     else
       redirect_to @content
     end
   end
   

高级行为

您可能想要更新“n 个用户喜欢这个”显示。要实现这一点，请按照以下步骤操作:

1. 为您的计数器值添加一个句柄，以便您稍后可以使用 JS 找到它:

   <span class="votes-count" data-id="<%= @content.id %>">
     <%= @content.get_likes.size %>
   </span>
   users like this
   

   另请注意使用data-id，而不是id。如果经常使用此代码段，我会将其重构为辅助方法。

2. 让 Controller 回答计数而不是简单的“OK”(加上一些信息以在页面上找到计数器；键是任意的):

   #…
   if request.xhr?
     render json: { count: @content.get_likes.size, id: params[:id] }
   else
   #…
   

3. 构建一个 JS(我更喜欢 CoffeeScript)来响应 AJAX 请求:

   # Rails creates this event, when the link_to(remote: true)
   # successfully executes
   $(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
     # the `data` parameter is the decoded JSON object
     $(".votes-count[data-id=#{data.id}]").text data.count
     return
   

   同样，我们使用 data-id 属性来仅更新受影响的计数器。

状态切换

要动态地将链接从“喜欢”更改为“不喜欢”，反之亦然，您需要进行以下修改:

1. 修改 View :

   <% if current_user.liked? @content %>
     <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } %>
   <% else %>
     <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } %>
   <% end %>
   

   同样:这应该进入辅助方法(例如 vote_link current_user, @content)。

2. 还有你的 CoffeeScript:

   $(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
     # update counter
     $(".votes-count[data-id=#{data.id}]").text data.count
   
     # toggle links
     $("a.vote[data-id=#{data.id}]").each ->
       $a = $(this)
       href = $a.attr 'href'
       text = $a.text()
       $a.text($a.data('toggle-text')).attr 'href', $a.data('toggle-href')
       $a.data('toggle-text', text).data 'toggle-href', href
       return
   
     return