Question

好的，我开始在这个上拔头发了。我是rails的新手，并且正在学习制作pinterest风格应用的教程。我完成了它，但对投票系统并不满意。

每次点击投票时，页面都会刷新。所以我发现了一些关于它的帖子并完全按照它说的做了。它一直在加载一个显示js代码而不是执行它的页面。

今天早上我换了一个＆＃34; put＆＃34;到＆＃34;得到＆＃34;然后再回来，现在它正在工作......没有想到改变它的事情。

但是现在它正在对页面上的每个帖子进行投票，而不仅仅是我点击的那个帖子。当我将鼠标悬停在链接上时，它们都会指向该链接的正确ID。

这是来自控制器的代码：

def upvote
@pin.upvote_by current_user
respond_to do |format|
  format.html { redirect_to :back }
  format.js { render :layout => false }
  format.json 
end
end

视图（haml）：

.btn-group.pull-right
      = link_to like_pin_path(pin), method: :put, remote: true, class: "btn btn-like" do
        %span.glyphicon.glyphicon-heart
          = pin.get_upvotes.size

Upvote.js.erb：

$('.glyphicon-heart').html('<%=@pin.get_upvotes.size%>');

的routes.rb

Rails.application.routes.draw do
  devise_for :users
  resources :pins do
    member do
      put "like", to: "pins#upvote", defaults: { format: 'js' }
    end
  end

  root "pins#index"
end

点击“赞”按钮时，这里是来自控制台的日志：

Started PUT "/pins/10/like" for ::1 at 2015-12-08 11:40:02 -0600
Processing by PinsController#upvote as JS
Parameters: {"id"=>"10"}
Pin Load (0.2ms)  SELECT  "pins".* FROM "pins" WHERE "pins"."id" = ? LIMIT 1  [["id", 10]]
User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 2]]
(0.3ms)  SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."voter_id" = ? AND "votes"."voter_type" = ? AND "votes"."vote_scope" IS NULL  [["votable_id", 10], ["votable_type", "Pin"], ["voter_id", 2], ["voter_type", "User"]]
ActsAsVotable::Vote Load (0.6ms)  SELECT  "votes".* FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."voter_id" = ? AND "votes"."voter_type" = ? AND "votes"."vote_scope" IS NULL  ORDER BY "votes"."id" DESC LIMIT 1  [["votable_id", 10], ["votable_type", "Pin"], ["voter_id", 2], ["voter_type", "User"]]
(0.2ms)  begin transaction
(0.1ms)  commit transaction
(0.2ms)  SELECT COUNT(*) FROM "votes" WHERE "votes"."votable_id" = ? AND "votes"."votable_type" = ? AND "votes"."vote_flag" = ? AND "votes"."vote_scope" IS NULL  [["votable_id", 10], ["votable_type", "Pin"], ["vote_flag", "t"]]
Rendered pins/upvote.js.erb (4.4ms)
Completed 200 OK in 25ms (Views: 9.4ms | ActiveRecord: 1.8ms)

我确定它的确非常简单，但ajax / js对我来说比铁轨更新。

如果我需要发布任何其他内容，请告诉我。任何帮助将非常感谢！

同样为了将来参考，什么会使链接加载一个页面与js代码而不是执行代码？因为我不觉得我今天改变了任何激烈的事情，所以我不知道自己是怎么过去的。我很高兴我做到了，但知道怎么做会很有帮助。

Answer 1

这样做是因为你的JS技术上是针对该类的所有链接。相反，您可以将模型的单个图钉的id附加到链接的类或创建数据属性，但这完全取决于您。这样做只会针对单击的一个链接。

<强>更新

基本上，您需要为持有投票按钮的容器div分配一个类（实例的ID）：{strong>索引视图为pin-#{pin.id}，为pin-#{@pin.id}显示视图。

<强>控制器

def upvote
  @pin.upvote_by current_user

  respond_to do |format|
    format.js { render "upvote.js.erb" }
  end
end

<强>路线

...
resources :pins do
  member do
    put :upvote
  end
end

索引视图

...
%div{class: "btn-group pull-right pin-#{pin.id}"}
  = render "upvote", pin: pin

显示视图

...
.col-md-6
    %div{class: "btn-group pull-right pin-#{@pin.id}"}
      = render "upvote", pin: @pin
      -if user_signed_in?
      = 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"

<强> _upvote.html.haml

= link_to upvote_pin_path(pin), method: :put, remote: :true, class: "btn btn-default btn-like" do
  %span.glyphicon.glyphicon-heart
  = pin.get_upvotes.size

<强> upvote.js.erb

$(".pin-<%= @pin.id %>").html("<%= escape_javascript(render 'upvote', pin: @pin) %>");

Rails Acts_as_votable ajax / js upvoting所有帖子而不是一个

1 个答案: