Ruby on rails - 充当可投票的JavaScript投票按钮

ruby on rails - Acts as votable javascript vote button

本文关键字：JavaScript 按钮 on rails Ruby      更新时间：2023-09-26

>我正在使用一个名为 acts_as_votable 的 gem 来使我的模型可投票。

目前一切正常。

但是每次有人为帖子投票时，页面都必须刷新。如何在不刷新页面的情况下进行投票。我可以添加一个简单的JavaScript吗？

这是我在控制器中的内容：

def vote
  @post = Post.find(params[:post_id])
  @post.liked_by current_user
  respond_to do |format|
    format.html {redirect_to :back }
  end
end

以下是我的看法：

 <%= link_to “like post", like_post_path(@post), method: :put %>

一个非常简单的版本可能如下所示：

红宝石

def vote
  @post = Post.find(params[:post_id])
  @post.liked_by current_user
  respond_to do |format|
    format.html {redirect_to :back }
    format.json { render json: { count: @post.liked_count } }
  end
end

目录

<%= link_to 'like', vote_path(@post), class: 'vote', remote: true, data: { type: :json } %>

.JS

$('.vote')
  .on('ajax:send', function () { $(this).addClass('loading'); })
  .on('ajax:complete', function () { $(this).removeClass('loading'); })
  .on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
  .on('ajax:success', function (data) { $(this).html(data.count); });

这是一个非常基本的版本，显示了基本方法，但它有一些明显的陷阱：

  • 没有办法"不投票"
  • "加载"指示器不是很好的用户体验;使用JS，我们始终可以显示用户的当前状态，并在后台处理与服务器的同步。
  • 视图中的任何 HTML 缓存都会破坏这一点

很简单。拿走你的响应块：

def vote
  @post = Post.find(params[:post_id])
  @post.liked_by current_user
end

并使您的按钮远程：

<%= link_to “like post", like_post_path(@post), method: :put, remote: true %>

如果您希望在某人投票弹出消息或其他内容时运行脚本，请创建一个文件vote.js.erb（通过 rails 命名约定）并将其放在 view 文件夹中。你可以把javascript放在那里，当访问控制器操作时，它将运行。

PS，您确定like_post_path指向vote控制器的路径吗？

Ruby on Rails为此提供了Ajax帮助程序。例如：

<%= link_to “like post", like_post_path(@post), method: :put, remote: true %>

但是，您需要使用 JavaScript 手动更新计票器。

相关文章：