Rails:如何在一个视图中以增量方式将项添加到排序列表

时间:2015-11-11 20:32:43

标签: ruby-on-rails ajax activerecord acts-as-list

我正在尝试为音乐家创建一个设置列表应用。用户可以上传他们的歌曲曲目和曲目。从这些歌曲列表中选择歌曲以填充特定演出的集合列表。

见图片:setlist_screenshot。 单击左侧上的歌曲上的箭头图标应将歌曲添加到右侧的可排序列表中。

有问题的模型:

class Setlist < ActiveRecord::Base
  belongs_to :organization
  # join between Set Lists & Arrangements(songs)
  has_many :items, -> { order(position: :asc) }
  has_many :arrangements, through: :items
end

-

class Item < ActiveRecord::Base
  # join between Set Lists & Arrangements(songs)
  belongs_to :arrangement
  belongs_to :setlist
  acts_as_list scope: :setlist
end

-

class Arrangement < ActiveRecord::Base
  belongs_to :song
  belongs_to :organization
  has_many :attachments     
  # join between Set Lists & Arrangements(songs)
  has_many :items
  has_many :setlists, through: :items
end

基本上,一个集合列表有许多安排(通过歌曲)到项目(连接表),而安排(歌曲)当然可以在许多设置列表中。

我在按钮中添加歌曲的代码是:

<%= link_to(organization_setlists_path(:arrangement_id => song.arrangements.first.id, setlist_id: @new_set.id, remote: true), method: "post", class: "secondary-content" )

这是一个帖子请求(包括歌曲的排列ID和新动作中的Setlist.new的id)对setlists控制器的创建动作,如下所示:

class SetlistsController < ApplicationController
before_action :authenticate_user!

def new
    if @new_set.nil?
        @new_set = Setlist.create
        @new_item = Item.new 
    end
end

def create
    @arrangement = Arrangement.find(params[:arrangement_id])
    @new_item = Item.new 
    @new_item.setlist_id = Setlist.find(params[:setlist_id])
    @new_item.arrangement_id = @arrangement.id
    if @new_item.save
        flash[:message] = "Song Sucessfully Added!"
    else
        flash[:message] = "Something Went Wrong"
    end
end  

理想情况下,我希望在每次单击添加/箭头按钮后为同一个设置列表创建一个新项目(远程),直到用户完成创建该设置列表。要在右侧显示,我有:

<% if @new_set && @new_set.items.count >=1 %>
    <ul>
    <% @new_set.items.each do |item| %>
        <li class="center-align"><%= item.arrangement.title %></li>
    <% end %>
    </ul>
<% else %>
    <p class="center-align">Add Songs From The List On The Left</p>
<% end %>

最终,用户应该能够最终确定它并继续创建另一个设置列表(如果需要)。

我真的不知道如何解决这个问题,而不是我在这里所做的事情,这是行不通的。问题是:

首先,创建动作实际上是创建一个项目&amp;由于某种原因,即使从link_to参数正确传递setlist id,也为新项目分配安排的外键,但不为setlists分配。

此外,每次刷新页面时,都会根据新操作中的内容生成新的设置列表,因此添加的每个项目都会进入设置列表,然后生成空白设置列表,因此不会出现任何内容在右边。

最后,这一切看起来一团糟。任何人都有更好的设计策略来实现这一目标?任何帮助将非常感谢!!!

1 个答案:

答案 0 :(得分:0)

这里的主要问题是您的控制器违反了约定。

当用户向SetlistController发帖时,您的Setlist应创建/setlists

如果要创建新的子记录,请POST到/setlists/:setlist_id/items。这将由ItemsController处理。

# routes.rb
resources :setlists, shallow: true do
  resources :items
end
class ItemsController < ApplicationController

  respond_to :html
  before_action :find_setlist!, only: [:create, :index]

  def create
    @item = @setlist.items.build(item_params)
    @item.save
    respond_with @item
  end

  # ...

  private
    def find_setlist!
      @setlist = Setlist.includes(:items).find!(params[:setlist_id])
    end

    def items_params
       params.require(:item)
             .permit(
                :arrangement_id
             )
    end
end
<% @arrangements.each do |a| %>
  <%= button_to 'Add to set', setlist_items_path(@setlist), 
      arrangement_id: a.id, remote: true 
  %>
<% end %>

替代是使用accepts_nested_attibutes_for :items来允许Setlist接受项目的参数。

这里的关键区别在于将其他项目添加到现有的集合列表中时,例如:

PATCH /setlist/:id
params: {
  item_attributes: [
    {
      arrangement_id: 2
    },
    {
      arrangement_id: 3
    }
  ]
} 

真正的好处是用户可以执行多个操作,例如添加/删除,您只需将单个setlist推送到数据库以更新状态,而不是对每个子记录使用多个POST / DELETE调用。

class Setlist < ActiveRecord::Base
  belongs_to :organization
  # join between Set Lists & Arrangements(songs)
  has_many :items, -> { order(position: :asc) }
  has_many :arrangements, through: :items
  accepts_nested_attributes_for :items, allow_destroy: true
end
class SetlistsController < ApplicationController

  respond_to :html
  before_action :set_setlist, only: [:show, :edit, :update, :destroy]

  def new
    @setlist = Setlist.new
    @setlist.items.build 
  end

  def create
    @setlist = Setlist.new(setlist_params)
    @setlist.save
    respond_with @setlist
  end

  def update
    @setlist.update(setlist_params)
    @setlist.items.build
    respond_with @setlist
  end

  # ...

  private
    def set_setlist
      @setlist = Setlist.includes(:items).find(params[:id])
    end

    def setlist_params
      params.require(:setlist)
            .permit(
              :foo, :bar # attributes for the list
              items_attributes: [ :position, :arrangement_id, :_destroy ]
            )
    end
end

支持此功能的基本表单设置如下所示:

<%= form_for(@setlist) do |f| %>
  <%= fields_for :items do |item| %>
    <%= item.number_field :postition %>
    <%= item.collection_select(:arrangement_id, @setlist.organization.arrangements, :id, :name) %>
    <%= item.checkbox :_destroy, label: 'Delete?' %>
  <% end %>
<% end %>

当然这只是一个简单的旧同步HTML表单 - 添加AJAX功能和拖放重新排序等有点超出范围。

请注意,这些解决方案并非独占。您可以轻松地在应用程序中同时拥有两个选项(嵌套属性和指定控制器),具体取决于您的要求是否也需要您能够单独操作子记录,或者您是否希望将其作为API的一部分提供。