切換按鈕動作OnClick - JQuery + Rails

Question

我想實現一個訂閱/取消訂閱切換按鈕，它會創建/銷燬訂閱objectonClick，但我很難找到一個優雅的解決方案。

我已經嘗試過多種想法，並得出結論，我需要使用Javascript來實現這一點。但是，我不確定是否/如何在用戶單擊該按鈕時同時更改按鈕文本及其操作。請參閱下面的button_to 'Subscribe'和button_to 'Unubscribe'。

任何意見或建議將不勝感激！

藝術家索引視圖：

<% @artists.each do |artist| %> 
    <tr id="tr_<%=artist.id%>"> 
    <td><%= artist.name %></td> 
    <td><%= artist.artist_data["name"] %></td> 
    <td><%= artist.artist_data["facebook_tour_dates_url"] %></td> 
    <td><%= artist.artist_data["mbid"] %></td> 
    <td><%= artist.artist_data["upcoming_event_count"] %></td> 
    <% if artist.is_not_subscribed?(user_id: @user.id, artist_id: artist.id)%> 
     <td><%= button_to 'Subscribe', user_subscriptions_path(@user, artist_id: artist.id), method: :post, id: "subscribe_link_#{artist.id}", class: "subscribe", remote: true %></td> 
    <% else %> 
     <td><%= button_to 'Unsubscribe', user_subscription_path(@user, artist.find_subscription(user_id: @user.id, artist_id: artist.id)), method: :delete, id: "unsubscribe_link_#{artist.id}", class: "unsubscribe", remote: true %></td> 
    <% end %> 
<% end %> 

訂閱控制器：

def create 
    @user = User.find(params[:user_id]) 
    @subscription = @user.subscriptions.build(subscription_params) 
    @subscription.artist_id = params[:artist_id] 

respond_to do |format| 
    if @subscription.save 
    format.html { redirect_to artists_path, notice: 'Subscription was successfully created.' } 
    format.json { render :show, status: :created, location: @subscription } 
    format.js 
    else 
    format.html { render :new } 
    format.json { render json: @subscription.errors, status: :unprocessable_entity } 
    format.js { render js: @subscription, notice:'Unable to create Subscription' } 
    end 
end 
end 

def destroy 
@subscription = Subscription.find(params[:id]) 
@subscription.destroy 

respond_to do |format| 
    format.html { redirect_to user_subscriptions_url, notice: 'Subscription was successfully destroyed.' } 
    format.json { head :no_content } 
    format.js 
end 
end 

訂閱模式：

class Subscription < ActiveRecord::Base 
    belongs_to :artist 
    belongs_to :user 
    accepts_nested_attributes_for :artist 
end 

藝術家型號：

class Artist < ActiveRecord::Base 
    include Subscribable 

    has_and_belongs_to_many :events 
    has_many :subscriptions 
    has_many :users, through: :subscriptions 
    validate :artist_already_exists? 
end 

用戶模型：

class User < ActiveRecord::Base 
    include Subscribable 

    has_many :subscriptions 
    has_many :artists, through: :subscriptions 
    accepts_nested_attributes_for :subscriptions 
end 

Answer 1

從這個blog post中汲取靈感，我是能夠實現以下解決方案。如果您有關於如何更好地設計的反饋或建議，請不要害羞。我會很感激你的想法。

TLDR：增加了一個link_to_toggle方法來清理視圖。使用Javascript的replaceWith在每個鏈接上單擊調用link_to_toggle。

的意見/藝術家/ index.html.erb

<% @artists.each do |artist| %> 
     <tr id="tr_<%=artist.id%>"> 
     <td><%= artist.name %></td> 
     <td><%= artist.artist_data["name"] %></td> 
     <td><%= artist.artist_data["facebook_tour_dates_url"] %></td> 
     <td><%= artist.artist_data["mbid"] %></td> 
     <td><%= artist.artist_data["upcoming_event_count"] %></td> 
     <td><%= link_to_toggle_user_subscription(user:@user, artist:artist)%></td> 
     <td><%= link_to 'Edit', edit_artist_path(artist) %></td> 
     <td><%= link_to 'Destroy', artist, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
     </tr> 
    <% end %> 

傭工/ subscriptions_helper.rb

module SubscriptionsHelper 

    def link_to_toggle_user_subscription(user:user, artist:artist) 

    if user.is_subscribed?(user_id: user.id, artist_id: artist.id) 
     link_to('Unsubscribe', user_subscription_path(@user, artist.find_subscription(user_id: @user.id, artist_id: artist.id), artist_id: artist.id), 
       method: :delete, 
       id: "unsubscribe_link_#{artist.id}", 
       class: "unsubscribe", 
       remote: true) 
    else 
     link_to('Subscribe', user_subscriptions_path(@user, artist_id: artist.id), 
       method: :post, 
       id: "subscribe_link_#{artist.id}", 
       class: "subscribe", 
       remote: true) 
    end 
    end 

end 

控制器/ subscriptions_controller.rb

def create 
    @user = current_user 
    @artist = Artist.find(params[:artist_id]) 
    @subscription = @user.subscriptions.build(subscription_params) 
    @subscription.artist_id = params[:artist_id] 

    respond_to do |format| 
     if @subscription.save 
     format.html { redirect_to artists_path, notice: 'Subscription was successfully created.' } 
     format.json { render :show, status: :created, location: @subscription } 
     format.js 
     else 
     format.html { render :new } 
     format.json { render json: @subscription.errors, status: :unprocessable_entity } 
     format.js { render js: @subscription, notice:'Unable to create Subscription' } 
     end 
    end 
    end 

def destroy 
    @user = current_user 
    @subscription = Subscription.find(params[:id]) 
    @artist = Artist.find(params[:artist_id])  
    @subscription.destroy 

    respond_to do |format| 
     format.html { redirect_to user_subscriptions_url, notice: 'Subscription was successfully destroyed.' } 
     format.json { head :no_content } 
     format.js 
    end 
    end 

的意見/訂閱/創建。 js.erb

$('#subscribe_link_<%=@artist.id%>').replaceWith("<%=j link_to_toggle_user_subscription(user:@user, artist:@artist)%>"); 

視圖/訂閱/ destroy.js.erb

$('#unsubscribe_link_<%=@artist.id%>').replaceWith("<%=j link_to_toggle_user_subscription(user:@user, artist:@artist)%>");