【问题标题】:Acts as votable javascript vote button充当可投票的 javascript 投票按钮
【发布时间】:2014-04-02 03:23:06
【问题描述】:

我正在使用名为 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 %>

【问题讨论】:

    标签: javascript ruby-on-rails ruby ruby-on-rails-4


    【解决方案1】:

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

    红宝石

    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
    

    HTML

    <%= 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 缓存都会破坏它

    【讨论】:

    • 为什么我们可以省略 format.js?他的工作如何?我似乎无法找到一个直接的答案。关于响应 toptal.com/ruby-on-rails/… 如何适用于每种情况。
    • format.js 将处理对 JavaScript 的请求。因此,您可以让操作响应加载时要运行的实际代码。我在做format.json,这意味着该动作将返回一个JSON格式的字符串。
    • 这个 json 是如何处理的?有哪些步骤,是什么触发了它们?你仍然有 js 代码,它仍然可以运行。
    • 在这里,我写了一个例子来帮助解释它是如何更好地工作的:jsfiddle.net/6XY8h
    • 我的代码将进入app/assets/javascripts/vote_widget.js。在application.js 中,我将使用资产管道包含它。我会将application.js 添加到布局的底部。
    【解决方案2】:

    简单。拿走你的回应块:

    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 命名约定)并将其放入视图文件夹中。 您可以将 javascript 放在那里,当访问控制器操作时将运行。

    PS,您确定路径 like_post_path 指向您的 vote 控制器吗?

    【讨论】:

    • 您可以保留响应块,并添加format.js 行,对吗?然后无论用户是否有 JavaScript,它都可以工作。
    • 是的,你可以做到。
    【解决方案3】:

    Ruby on Rails 为此提供了Ajax helpers。 例如:

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

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

    【讨论】:

    • B什么时候发布,什么时候发布?第一次投票将是创建(发布),但随后的投票将是更新或取消投票。您如何确保该方法适用于所有情况?在 JavaScript 中使用 .html 方法?有没有更清洁的方法?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-29
    • 1970-01-01
    • 1970-01-01
    • 2014-02-08
    相关资源
    最近更新 更多