切换按钮动作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)%>");