Rails Acts_as_votable ajax/js 点赞所有帖子而不是一个
Rails Acts_as_votable ajax/js upvoting all posts instead of one
好吧,我开始在这个问题上大费周章了。我是 rails 的新手,正在学习有关制作 pinterest 风格应用程序的教程。我完成了它,但对向上投票系统不满意。
每次点击投票都在刷新页面。所以我找到了一些关于它的 post 并且完全按照它说的做了。它一直加载一个页面,向我显示 js 代码而不是执行它。
今天早上,我将 "put" 更改为 "get",然后又改回来,现在可以使用了...不知道发生了什么变化。
但是,现在它对页面上的每个 post 进行投票,而不仅仅是我点击的那个。当我将鼠标悬停在 link 上时,它们都指向 link.
的正确 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 对我来说比 rails 还要新。
如果还有其他需要 post,请告诉我。任何帮助将不胜感激!
另外,为了将来参考,什么会使 link 使用 js 代码加载页面而不是执行代码?因为我不觉得我今天有什么大的改变,我不知道我是怎么熬过来的。我很高兴我做到了,但知道怎么做会很有帮助。
之所以这样做,是因为您的 JS 在技术上以 class 为目标的所有 link。相反,您可以将 individual pin 的模型 id
附加到 link 的 class 或创建数据属性,但这完全取决于您。这样一来,它只会定位到被点击的 link。
更新:
本质上,您需要将 class(实例的 ID)分配给容器 div 并按住投票按钮:pin-#{pin.id}
for index view 和 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 的新手,正在学习有关制作 pinterest 风格应用程序的教程。我完成了它,但对向上投票系统不满意。
每次点击投票都在刷新页面。所以我找到了一些关于它的 post 并且完全按照它说的做了。它一直加载一个页面,向我显示 js 代码而不是执行它。
今天早上,我将 "put" 更改为 "get",然后又改回来,现在可以使用了...不知道发生了什么变化。
但是,现在它对页面上的每个 post 进行投票,而不仅仅是我点击的那个。当我将鼠标悬停在 link 上时,它们都指向 link.
的正确 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 对我来说比 rails 还要新。
如果还有其他需要 post,请告诉我。任何帮助将不胜感激!
另外,为了将来参考,什么会使 link 使用 js 代码加载页面而不是执行代码?因为我不觉得我今天有什么大的改变,我不知道我是怎么熬过来的。我很高兴我做到了,但知道怎么做会很有帮助。
之所以这样做,是因为您的 JS 在技术上以 class 为目标的所有 link。相反,您可以将 individual pin 的模型 id
附加到 link 的 class 或创建数据属性,但这完全取决于您。这样一来,它只会定位到被点击的 link。
更新:
本质上,您需要将 class(实例的 ID)分配给容器 div 并按住投票按钮:pin-#{pin.id}
for index view 和 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) %>");