切换按钮操作OnClick-JQuery+Rails

Question

我想实现一个Subscribe/Unsubscribe切换按钮，它可以创建/销毁Subscription对象单击，但我很难找到一个优雅的解决方案。

我已经尝试了多种想法，并得出结论，我需要使用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

从这篇博客文章中获得灵感，我能够实现以下解决方案。如果你对如何更好地设计这个有反馈或建议，不要害羞。我很感激你的想法。

TLDR：添加了一个link_to_toggle方法来清理视图。使用Javascript的replaceWith在每次单击链接时调用link_to_toggle。

views/artists/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 %>

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

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

视图/订阅/create.js.erb

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

views/subscriptions/dedestroy.js.erb

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