Question

我是Ruby on Rails的新手，我正在开发一个项目（Pinterest clone），它有一个模型 User 和一个模型 Pin 。我正在使用 acts_as_votable gem来为用户提供上传或下载我上传的图片＆＃39; pin＆＃39;。一切都运作良好，但我正在刷新喜欢/不喜欢系统的页面，以更新喜欢/不喜欢的计数器。

我想使用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 - ＆gt; 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模板：

<强>视图/针/ 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')并确保找到正确的元素。

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

1 个答案: