Блог

У меня есть приложение rails с почтовым ресурсом, в котором каждая конкретная запись может понравиться / не понравиться.

я хочу иметь возможность ставить лайки / дизлайки без обновления страницы. Я просмотрел несколько других сообщений SO, и все ответы связаны с Coffeescript,, как я могу решить это с помощью vanilla js?

(Я использую Friendly_id и acts_as_votable драгоценные камни)

Контроллер:

  class PostsController < ApplicationController
    before_action :authenticate_user!, only: [:upvote, :downvote] 
    before_action :set_post, only: [ :show , :upvote, :downvote] 
    respond_to :js, :json, :html

  def upvote
    @post.liked_by current_user
    redirect_back(fallback_location: root_path) 
  end 

  def downvote
    @post.disliked_by current_user
    redirect_back(fallback_location: root_path) 
  end 

end
  

Вид:

  <%= link_to like_post_path(@post), class:"like-btn", method: :put, remote: true do %> 
        <button class="btn btn-warning"> 
          <span><p><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></p></span>
        </button> 
      <% end %> 
      <%= link_to dislike_post_path(@post), class:"dislike-btn", method: :put, remote: true do %> 
        <button class="btn btn-warning"> 
          <span><p><i class="fa fa-thumbs-down fa-lg" aria-hidden="true"></i></p></span>
        </button> 
      <% end %> 
      <span> <%= @post.get_upvotes.size %> </span> 
  

Маршруты:

 resources :posts do
    member do
      put "like" => "posts#upvote"
      put "dislike" => "posts#downvote"
    end 
  end 
  

Модели:

 class Post < ApplicationRecord
  acts_as_votable

  extend FriendlyId
  friendly_id :title, use: :slugged 
end


  class User < ApplicationRecord
  acts_as_voter
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end
  

пожалуйста, дайте мне знать, если вам нужна какая-либо другая информация, спасибо!

Здесь я использую единственный метод, поскольку вы никогда не хотите, чтобы количество лайков опускалось ниже нуля.

Всякий раз, когда пользователю нравится публикация, количество увеличивается на 1, а цвет значка «большой палец вверх» меняется (просто чтобы показать визуальное изменение).

Когда пользователь нажимает на уже понравившуюся публикацию, количество лайков должно уменьшаться на единицу, поэтому мы должны использовать метод unliked_by, предоставляемый gem.

Для реализации этого мы можем использовать файл upvote.js.erb (помните, что имя файла должно совпадать с именем вашего метода контроллера, это упрощает процесс).

Затем в .js.erb файле мы можем смешать ruby с js и получить желаемый результат, как показано в upvote.js.erb файле.

Я добавляю дополнительный класс с именем liked , который изменяет цвет кнопки.

Пожалуйста, обратите внимание: я предполагаю, что у вас есть один пост на странице. Если у вас на странице несколько записей, вам следует добавить идентификаторы в контейнер posts и аналогичным образом изменить js код в upvote.js.erb файле.

posts_controller.rb

   def upvote
    if !current_user.liked? @post
      @post.liked_by current_user
    elsif current_user.liked? @post
      # as the above method can also result nil if he is yet to vote
      @post.unliked_by current_user 
    end
  end 
  

просмотры / сообщения / upvote.js.erb

 <% if current_user.liked? @post %>
 document.getElementsByClassName('like-btn')[0].className = "like-btn liked";
<% else %>
 document.getElementsByClassName('like-btn')[0].className = "like-btn";
<% end %>
document.getElementsByClassName('likes-count')[0].innerHTML="<%= @post.get_upvotes.size %>";
  

просмотр.html.erb

 <!-- Adding a class liked -->
<style>
 .liked {
    color: blue;
  }
</style>
<%= link_to like_post_path(@post), class:"like-btn", method: :put, remote: true do %> 
    <button class="btn btn-warning"> 
      <span><p><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></p></span>
    </button> 
<% end %> 
<span class="likes-count"> <%= @post.get_upvotes.size %> </span>