Rails / JS - кнопка «Мне нравится» с AJAX в 2018 году

Question

У меня есть следующий проект: (не использующий гем Act_as_votable, кроме всех других потоков, которые я нашел здесь!)

Есть модель Beat, которая has_many: likes andпринадлежат пользователю: ритм has_many: лайки и принадлежат_бо: битВ моем LikesController я получил действие create и destroy для создания нового лайка всякий раз, когда Beat нравится.Функциональность симпатии работает довольно хорошо, однако страница перезагружается с каждым лайком / непохожим.Используя AJAX, я хочу показать текущий статус лайка (сплошное сердце = понравившийся) без перезагрузки страницы или перенаправления куда-либо.

controllers / likes_controller.rb:

class LikesController < ApplicationController

  def create
    @beat = Beat.find(params[:beat_id])

    if already_liked?
      flash[:notice] = "You can't like more than once!"
    else
      @beat.likes.create(user_id: current_user.id)
    end
  end

  def destroy
    @beat = Beat.find(params[:beat_id])
    @like = @beat.likes.find(params[:id])
    if !already_liked?
      flash[:notice] = "Can't unlike!"
    else
      @like.destroy
    end
  end

  private
    def already_liked?
      Like.where(user_id: current_user.id, beat_id: params[:beat_id]).exists?
    end
end

просмотров / ударов/show.html.haml

= @beat.likes.count
= (@beat.likes.count) == 1 ? 'Like' : 'Likes'

- previous_like = @beat.likes.find { |like| like.user_id == current_user.id}
- if previous_like
  = button_to 'Unlike', beat_like_path(@beat, previous_like), method: :delete, remote: true 
- else
  = button_to 'Like', beat_likes_path(@beat), method: :post, remote: true 

= link_to 'Back', :beats

Используя remote: true, я могу отправить запрос AJAX на мой контроллер, но сначала как мне обработать это в моем контроллере?Как я отправляю обратно JSON / XML ajax-подобный ответ и последнее: как мне обработать этот ответ от моего контроллера с помощью JS для отображения в моем show.html.haml?

Answer 1

controllers / likes_controller.rb

  def create
    @beat = Beat.find(params[:beat_id])

    if already_liked?
      flash.now[:notice] = "You can't like more than once!"
    else
      @beat.likes.create(user_id: current_user.id)
    end
  end

views / beats / show.html.erb

<p id="likes-count"><%= pluralize(@beat.likes.count, 'Like') %></p>
<div id="like-button"><%= like_button_tag @beat, previous_like %></div>

helpers / beats_helper.rb

module ApplicationHelper
  def like_button_tag beat, previous_like
    return button_to 'Unlike', beat_like_path(beat, previous_like), method: :delete, remote: true if previous_like
    button_to 'Like', beat_likes_path(beat), method: :post, remote: true
  end
end

views / beats / create.js.erb

$('#likes-count').html('<%= pluralize(@beat.likes.count, 'Like') %>');
$('#like-button').html('<%= like_button_tag @beat, previous_like %>');

вы также можете использовать haml вместо erb