Javascript Rails充当可投票的ajax/js，对所有帖子进行投票，而不是一篇

好了，这一次我开始发抖了。我是rails的新手，正在学习制作pinterest风格应用程序的教程。我完成了，但对投票系统不满意

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

今天早上我把“放”改为“拿”，然后又回来了，现在它开始工作了。。。不知道发生了什么改变了它

但是，现在我要投票给页面上的每一篇文章，而不仅仅是我点击的那篇。当我将鼠标悬停在链接上时，它们都指向该链接的正确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）：

Upvote.js.erb：

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

以下是单击like按钮时控制台中的日志：

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对我来说甚至比rails更新

如果还有什么我需要发布的，请告诉我。任何帮助都将不胜感激

---

另外，作为将来的参考，是什么让链接加载带有js代码的页面而不是执行代码？因为我不觉得我今天改变了什么，所以我不知道我是怎么克服的。我很高兴我这么做了，但知道怎么做会很有帮助。

之所以这样做，是因为你的JS在技术上是针对该类的所有链接的。相反，您可以将单个pin的模型的

id

附加到链接的类中，或者创建一个数据属性，但这完全取决于您自己。在这样做时，它将只针对单击的一个链接

更新：

基本上，您需要将一个类（实例id）分配给一个容器div，该容器div按住投票按钮：

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"

显示视图

...
%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"

\u 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) %>");

$（.pin-“”.html（“”）；

不幸的是，现在它正在更新投票，但不再自动显示，只有在我刷新时才会显示。它似乎也破坏了以前工作的show view上的功能。更新了我的答案。看一看，让我知道事情是怎么发展的。嗯，恐怕也不行。尽管我刷新时它仍然会更新向上投票计数。我不知道这是不是个问题？可能吧。让我们试试这个。将这部分代码放到它自己的部分

\u upvote.html.slim

中（假设您使用slim作为预编译器）。然后在主视图模板中渲染该部分。让我知道会发生什么。我也会更新我的答案给你一个更好的主意。同样的结果，它会更新投票，但在页面重新加载之前不会显示。我真的很感谢你抽出时间来帮助我。希望我们能弄清楚这件事的真相！它至少在更新投票方面起了作用，而且以前也在即时显示投票，所以我知道这是可能的哈哈。不能放弃！