Javascript充当可编程的宝石

好的，我使用acts_as_votable gem允许用户从收藏中添加/删除书籍。我希望add/remove按钮可以在不重新加载页面的情况下工作，但是找不到任何地方以这种方式实现该按钮，只是将其用作投票计数器。我不在乎计票，只是增加/删除。我的假设是，我必须使用适当的javascript代码添加fave.js.erb和unve.js.erb，但具体是什么？提前谢谢

以下是来自控制器的操作：

def fave
@book = Book.find(params[:id])
current_user.likes @book
respond_to do |format|
  format.html { redirect_to :back }
  format.json
  format.js
end
end
def unfave
@book = Book.find(params[:id])
current_user.dislikes @book
respond_to do |format|
  format.html { redirect_to :back }
  format.json
  format.js
end
end

还有routes.rb

resources :books do
get "book/:page", :action => :index, :on => :collection
member do
  post "fave", to: "books#fave"
  post "unfave", to: "books#unfave"
end
end

从这个角度来看，它们被称为：

<% if user_signed_in? %>
<ul class="list-inline text-center">
<% if current_user.voted_up_for? @book %>
<li><%= button_to unfave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-danger", title: "Remove from Collection", data: {disable_with: "<span class='glyphicon glyphicon-minus'></span> Removing..."} do %>
<span class="glyphicon glyphicon-heart-empty"></span>  Remove from Collection
<% end %>
</li>
<% else %>
<li><%= button_to fave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-success", title: "Add to Collection", data: {disable_with: "<span class='glyphicon glyphicon-plus'></span> Adding..."} do %>
<span class="glyphicon glyphicon-heart"></span>  Add to Collection
<% end %>
</li>
<% end %>

从集合中删除


添加到集合

如果我理解您的正确操作，我会根据用户的投票状态显示和隐藏按钮。然后在用户添加/删除它们时显示/隐藏它们

<ul class="list-inline text-center">
  <li data-book-id="<%= @book.id %>">
    <%= button_to unfave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-danger unfave #{'hidden' unless current_user.voted_up_for?(@book)}", title: "Remove from Collection", data: {disable_with: "<span class='glyphicon glyphicon-minus'></span> Removing..."} do %>
      <span class="glyphicon glyphicon-heart-empty"></span>  Remove from Collection
    <% end %>
    <%= button_to fave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-success fave #{'hidden' if current_user.voted_up_for?(@book)}", title: "Add to Collection", data: {disable_with: "<span class='glyphicon glyphicon-plus'></span> Adding..."} do %>
      <span class="glyphicon glyphicon-heart"></span>  Add to Collection
    <% end %>
  </li>
</ul>

在unvev.js.erb中，您可以执行以下操作：

var $li = $("li[data-book-id='<%= @book.id %>']");
$li.find('button.unfave').show();
$li.find('button.fave').hide();

var $li = $("li[data-book-id='<%= @book.id %>']");
$li.find('button.fave').show();
$li.find('button.unfave').hide();

var$li=$（“li[databook id=''”）；
$li.find（'button.fave'）.show（）；
$li.find（'button.unveve'）.hide（）；

如果确实希望保持模板的原样，可以重新渲染部分：

$('ul.list-inline').html("<%= j render 'path/to/a/partial', book: @book %>");

$（'ul.list inline'）.html（“”）；

但是仍然不能异步加载。这可能是TurboLink的问题吗？可能不是。我认为turbolinks除了接受请求外，不会听取请求。尝试在js模板中添加警报，以确保它们正在渲染。如果是这样，您可能需要调整jquery。如果没有，请查看服务器日志并查看请求呈现的模板。