Javascript 切换按钮操作OnClick-JQuery+；轨道

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

我尝试了多种想法，并得出结论，我需要使用Javascript来实现这一点。但是，我不确定当用户单击按钮时是否/如何同时更改按钮文本及其操作。请参见下面的“订阅”按钮和“未订阅”按钮

任何反馈或建议将不胜感激

艺术家索引视图：

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

订阅模式：

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

用户模型：

class User < ActiveRecord::Base
  include Subscribable

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

class用户

受此启发，我得以实现以下解决方案。如果你有关于如何更好地设计它的反馈或建议，不要害羞。我很感激你的想法

TLDR：添加了一个

link\u to\u toggle

方法来清理视图。利用Javascript的

replaceWith

在每次点击链接时调用

link\u to\u切换

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

控制器/订阅\u 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)%>");

$（'subscribe\u link'）。替换为（“”）；

视图/订阅/destroy.js.erb

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

$（'unsubscribe\u link'）。替换为（“”）；

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

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