javascript - Ruby on Rails の Like ボタン Ajax

Question

Userモデルとモデルなどを含むRuby on RailsプロジェクトがContentあります。ユーザーがコンテンツを「いいね」できるようにしたかったので、acts_as_votable gem でそれを実現しました。

現在、いいねシステムは動いていますが、いいねボタン(link_to)が押されるたびにページを更新しています。

ページを更新せずにボタンといいね! カウンターを更新するために、Ajax を使用してこれを行いたいと思います。

私のContent -> Show見解では、これは私が持っているものです：

<% 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コントローラーはこれを好き/嫌いにします：

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

私が言ったように、いいねシステムは正常に動作していますが、ユーザーが押した後、いいねカウンターもいいねボタンも更新しません。代わりに、それをだますためredirect_to @contentに、コントローラーアクションを呼び出します。

単純な Ajax 呼び出しでこれを実装するにはどうすればよいですか? それを行う別の方法はありますか？

score 31 · Accepted Answer

さまざまな方法でこれを行うことができますが、簡単な方法は次のようになります。

準備

Rails UJS と jQuery を含めますapplication.js(まだ行っていない場合):
```
//= require jquery
//= require jquery_ujs
```

ヘルパーに追加remote: trueします。link_to

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

コントローラが 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 人のユーザーがこれを気に入りました」という表示を更新する必要があります。それをアーカイブするには、次の手順に従います。

カウンター値にハンドルを追加して、後で JS で見つけられるようにします。
```
<span class="votes-count" data-id="<%= @content.id %>">
  <%= @content.get_likes.size %>
</span>
users like this
```
の使用にも注意してdata-idくださいid。このスニペットが頻繁に使用される場合は、ヘルパーメソッドにリファクタリングします。
コントローラーが単に「OK」ではなくカウントで応答するようにします (さらに、ページでカウンターを見つけるための情報を追加します。キーは任意です)。
```
#…
if request.xhr?
  render json: { count: @content.get_likes.size, id: params[:id] }
else
#…
```

AJAX リクエストに反応する JS をビルドします (CoffeeScript の方がいいと思います)。

# 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属性を使用して、影響を受けるカウンターのみを更新しています。

状態を切り替える

リンクを「好き」から「嫌い」に、またはその逆に動的に変更するには、次の変更が必要です。

ビューを変更します。

<% 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)。

そしてあなたの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

javascript - Ruby on Rails の Like ボタン Ajax

1 に答える 1

準備

高度な動作

状態を切り替える

Related

Reference