Rails的Acts_as_votable宝石一样/与按钮与阿贾克斯 [英] Rails Acts_as_votable Gem Like/Unlike Buttons with Ajax

问题描述

我是新来的Ruby on Rails的，我用了acts_as_votable宝石打造像和不像按钮，使用户喜欢和不同的职位，但我不能让他们的希望与（反之亦然）的变化和更新计数器每次他们单击而无需刷新页面。我想下面的那种 - 相似的其他的答案，但我没有运气。 没有凌乱的变化我试图做的实现Ajax我的code是这样的：

I'm new to Ruby On Rails, I used the acts_as_votable gem to create Like and Unlike Buttons to make Users like and unlike Posts but I can't make them change from Like to Unlike (and viceversa) and update the counter each time they click without refreshing the page. I tried following other kind-of-similar answers but I had no luck. Without the messy changes I tried to do to implement Ajax my code looked like this:

邮政型号acts_as_votable和用户模型acts_as选民

Post Model acts_as_votable and 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), method: :put, class: "btn btn-primary btn-sm" do %>
      <span class="glyphicon glyphicon-chevron-up"> </span>
      Like
  <%end %>
  <%end %>

我读了很多有关Ajax的答案，但我无法复制的结果。 先感谢您！

I read a lot of answers about Ajax but I was unable to replicate the results. Thank you in advance!

推荐答案

首先，你需要指出你的的帖子控制器向JS格式回应的。然后，在 posts_controller 这两个动作变成了：

First, you need to point out your posts controller to respond to js format. Then the two actions in posts_controller become:

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

其次，你需要传递远程：真正的你的链接：

 <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), method: :get, remote: true, class: 'like_post' %>
     <% end %>
  </div>

更改方法：把到方法：获得，所以在<$ C $更改C>配置/ routes.rb中，并添加类以你的链接到绑定的JS。

I change method: :put to method: :get, so change it in your config/routes.rb, and add a class to your links to bind it in js.

最后，你需要创建2次在应用程序/视图/职位/ ：

Finally, you need to create 2 views in app/views/posts/:

• like.js.erb

• 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), remote: true, method: :get, class: 'unlike_post' %>');
});

unlike.js.erb

unlike.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), remote: true, method: :get, class: 'like_post' %>');

});

要处理数的更新，我用的是 .vote_count 类，所以在您的视图：

To handle update of count, I use a .vote_count class, so in your view:

<div class="vote_count">
  <%= @post.get_likes.size %>
</div> 

所以，我的观点：

So my view:

<div>
  <div class="vote_count">
    <%= @post.get_likes.size %>
  </div> 

  <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), method: :get, remote: true, class: 'like_post' %>
    <% end %>
  </div>
</div>

编辑：编辑我的答案。更新与类而不是ID链接。而看一看2 JS的视角以寻找最接近（）。它的工作原理以及在首页和显示的网页在我的沙盒应用程序。所以，请随时适应您的标记。

I edit my answer. Update your links with class instead id. And take a look at 2 js view to find closest(). It works well in index and show page in my sandbox app. So feel free to adapt to your markup.

这篇关于Rails的Acts_as_votable宝石一样/与按钮与阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！