ruby-on-rails – Rails Acts_as_votable Gem Like /不同于Ajax
发布时间:2020-12-17 02:08:11 所属栏目:百科 来源:网络整理
导读:我是 Ruby On Rails的新手,我使用acts_as_votable gem来创建Like和不同的按钮,使用户喜欢和不像Posts但我不能让他们从Like变为不同(和反之)并且每次他们更新计数器单击而不刷新页面.我尝试过其他类似的答案,但我没有运气. 没有我试图实现Ajax的混乱更改,我的
我是
Ruby On Rails的新手,我使用acts_as_votable gem来创建Like和不同的按钮,使用户喜欢和不像Posts但我不能让他们从Like变为不同(和反之)并且每次他们更新计数器单击而不刷新页面.我尝试过其他类似的答案,但我没有运气.
没有我试图实现Ajax的混乱更改,我的代码看起来像这样: Post Model acts_as_votable和User Model acts_as voter 帖子控制器有 def like @post = Post.find(params[:id]) @post.liked_by current_user redirect_to :back end def unlike @post = Post.find(params[:id]) @post.unliked_by current_user redirect_to :back end 路线有 resources :posts do member do put 'like',to: "posts#like" put 'unlike',to: "posts#unlike" end end 查看了 <%= @post.get_likes.size%> <% if @post.get_likes.size ==1 %> person like this <% else %> people like this <% end %> <div class="btn-group"> <% if (current_user.liked? @post) %> <%= link_to unlike_post_path(@post),method: :put,class: "btn btn-default btn-sm" do %> <span class="glyphicon glyphicon-chevron-down"></span> Unlike <%end %> <% else %> <%= link_to like_post_path(@post),class: "btn btn-primary btn-sm" do %> <span class="glyphicon glyphicon-chevron-up"></span> Like <% end %> <% end %> </div> 我阅读了很多关于Ajax的答案,但我无法复制结果. 解决方法
首先,您需要指出您的帖子控制器以响应js格式.然后posts_controller中的两个动作变为:
def like @post = Post.find(params[:id]) @post.liked_by current_user respond_to do |format| format.html { redirect_to :back } format.js { render layout: false } end end def unlike @post = Post.find(params[:id]) @post.unliked_by current_user respond_to do |format| format.html { redirect_to :back } format.js { render layout: false } end end 其次,您需要在链接上传递remote:true: <div class="votes"> <% if current_user.liked? @post %> <%= link_to unlike_post_path(@post),method: :get,remote: true,class: 'unlike_post' %> <% else %> <%= link_to like_post_path(@post),class: 'like_post' %> <% end %> </div> 我更改方法:: put to method :: get,所以在config / routes.rb中更改它,并在链接中添加一个类以在js中绑定它. 最后,您需要在app / views / posts /中创建2个视图: > like.js.erb $('.like_post').bind('ajax:success',function(){ $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @post.votes_for.size.to_s %>'); $(this).closest('.like_post').hide(); $(this).closest('.votes').html(' <%= link_to "Unlike",unlike_post_path(@post),class: 'unlike_post' %>'); }); >不一样.js.erb $('.unlike_post').bind('ajax:success',function(){ $(this).parent().parent().find('.vote_count').html('<%= escape_javascript @post.votes_for.size.to_s %>'); $(this).closest('.unlike_post').hide(); $(this).closest('.votes').html(' <%= link_to "Like",like_post_path(@post),class: 'like_post' %>'); }); 要处理计数更新,我使用.vote_count类,因此在您的视图中: <div class="vote_count"> <%= @post.get_likes.size %> </div> 所以我的看法: <div> <div class="vote_count"> <%= @post.get_likes.size %> </div> <div class="votes"> <% if current_user.liked? @post %> <%= link_to unlike_post_path(@post),class: 'unlike_post' %> <% else %> <%= link_to like_post_path(@post),class: 'like_post' %> <% end %> </div> </div> 编辑:我编辑我的答案.使用class而不是id更新您的链接.并查看2 js视图以找到closest().它在我的沙盒应用程序中的索引和显示页面中运行良好.所以请随意适应您的标记. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |