자바 스크립트 acts_as_votable gem

Question

그래, 사용자가 컬렉션에서 책을 추가/삭제할 수 있도록 acts_as_votable gem을 사용하고 있습니다. 페이지를 다시로드하지 않고도 추가/제거 버튼을 사용할 수는 있지만 버튼을 구현하는 곳에서는 투표 카운터로만 사용할 수 없습니다. 투표 수를 계산하는 데 신경 쓰지 않고 추가/제거 만합니다. 내 가정은 적절한 자바 스크립트 코드와 함께 fave.js.erb 및 unfave.js.erb를 추가해야하지만 정확히 무엇입니까? 미리 감사드립니다! 그런 다음

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

뷰에서 그들과 같이이라고

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 : 여기

는 컨트롤러에서 작업입니다

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

Answer 1

만약 I 당신이 올바르게하려는 것을 이해하면 사용자의 투표 상태에 따라 버튼을 보이거나 숨길 수 있습니다. 그런 다음 사용자가 추가/제거 할 때 표시/숨기기를 수행합니다.

<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> 

다른 도서의 경우 li이 여러 개인 것으로 가정합니다. fave.js.erb에서

, 당신이 할 수 있습니다 :

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

그리고 unfave.js.erb 년을, 당신은 할 수 있습니다 : 당신이 정말로 원하는 경우

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

템플릿을 그대로 유지하려면 부분적으로 다시 렌더링하면됩니다.

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