在使用 AJAX 的 Ruby on Rails 上喜欢/不喜欢

Question

我是 Ruby on Rails 的新手，我正在开发一个项目（Pinterest 克隆），该项目有一个模型 User 和一个模型 Pin。我正在使用 acts_as_votable gem 让用户对上传的图像进行投票或否决，我称之为“pins”。一切正常，但我正在刷新喜欢/不喜欢系统的页面，以更新喜欢/不喜欢计数器。

我想使用 AJAX，这样我就不需要刷新页面了。

Pin 控制器有这个：

def destroy
    @pin.destroy
    redirect_to root_path   
end

def  upvote
    @pin.upvote_by current_user
    redirect_to :back
end

def downvote
    @pin.downvote_by current_user
    redirect_to :back
end

private

def pin_params
    params.require(:pin).permit(:title, :description, :image) 
end

def find_pin
    @pin = Pin.find(params[:id])
end

我用的是haml，Pin -> show视图有以下内容：

#pin_show.row
 .col-md-8.col-md-offset-2
    .panel.panel-default
        .panel-heading.pin_image
            = image_tag @pin.image.url
        .panel-body
            %h1= @pin.title
            %p.description= @pin.description
        .panel-footer
            .row
                .col-md-6
                    %p.user
                        Submitted by
                        = @pin.user.name
                .col-md-6
                    .btn-group.pull-right
                        = link_to like_pin_path(@pin), method: :put, class: "btn btn-default" do
                            %span.glyphicon.glyphicon-heart-empty
                                = @pin.get_upvotes.size

                        = link_to dislike_pin_path(@pin), method: :put, class: "btn btn-default" do
                            %span.glyphicon.glyphicon-thumbs-down   
                                = @pin.get_downvotes.size   
                        - if @pin.user == current_user      
                            = link_to "Edit", edit_pin_path, class: "btn btn-default"
                            = link_to "Delete", pin_path, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-default"

我的 routes.rb 有这个：

resources :pins do
member do
    put "like", to: "pins#upvote"
    put "dislike", to: "pins#downvote"
end

结束

当我有这种方法时，我该如何实现 AJAX。我是 Rails 新手，我几乎被困在这里

Answer 1

Rails 不显眼的 Javascript 将侦听带有 data-remote=true 的链接并将其作为 js 请求提交。

= link_to like_pin_path(@pin), method: :put, data: { remote: true }...

这些请求将以 js 格式进入您的控制器，因此如果是 js 格式，您的控制器操作不需要重定向。

def  upvote
  @pin.upvote_by current_user
  respond_to do |format|
    format.html { redirect_to :back }
    format.js { render 'vote' }
  end
end

这将为您投票@pin。但是如果你想在点击时显示反馈，你需要一些 js。您可以让 upvote 方法渲染一个重新渲染模板的 js 模板：

views/pins/vote.js.erb

$(function() { 
  $('span.glyphicon.glyphicon-heart-empty').text("<%= @pin.get_upvotes.size %>");
  $('span.glyphicon.glyphicon-thumbs-down').text("<%= @pin.get_downvotes.size %>");
});

编辑：调试

如果 Javascript 没有达到您的预期，有几种方法可以找出问题所在。

vote.js.erb

$(function() { 
  var upvotes = "<%= @pin.get_upvotes.size %>";
  var downvotes = "<%= @pin.get_downvotes.size %>"
  debugger;
});

如果您打开了 Javascript 控制台，调试器将暂停执行并允许您手动插入 jQuery。您可以访问upvotes 和downvotes，并且可以粘贴$('.glyphicon-heart-empty') 并确保找到正确的元素。