Question

我想实现一个订阅/取消订阅切换按钮，用于创建/销毁订阅对象，但我找不到优雅的解决方案。

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

视图/订阅/ create.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)%>");

切换按钮操作OnClick - JQuery + Rails

1 个答案: