Cocoon/jQuery：将项目附加到相关表

Question

我有一个 Rails 视图，它允许将多个 PanelItems 添加到页面上的多个面板中。

型号

class Page < ActiveRecord::Base
  has_many :panels
  accepts_nested_attributes_for :panels, allow_destroy: true

class Panel < ActiveRecord::Base
  has_many :panel_items
  accepts_nested_attributes_for :panel_items, allow_destroy: true, reject_if: :all_blank

class PanelItem < ActiveRecord::Base

观看次数

app/views/pages/_form.html.haml

= simple_form_for @page, html: { class: 'form-inline' } do |form|
  = form.input :name, required: :required, autofocus: :autofocus

  %table.table.table-hover
    %tbody
      = form.simple_fields_for :panels do |panel_form|
        %tr
          %td
            .table-responsive
              %table.table.table-hover
                %tbody.panel-items
                  = panel_form.simple_fields_for :panel_items do |panel_item_fields|
                    = render 'panel_item_fields', f: panel_item_fields
            = link_to_add_association panel_form, :panel_items,
                'data-association-insertion-method' => 'append',
                class: 'btn btn-success pull-right' do
              %span{class: 'glyphicon glyphicon-plus-sign'}
              New item
  = form.button :submit, "Update Page", class: 'btn-success'

app/views/pages/_panel_item_fields.html.haml

%tr.nested-fields
  %td
    = f.input :content_item_id,
        collection: current_site.content_items,
        selected: f.object.content_item_id,
        prompt: 'Select a content item'
  %td
    = link_to_remove_association f, title: 'remove this item',
        data: { toggle: 'tooltip', association: 'panel-item' } do
      %span.sr-only remove this item
      %span{class: 'glyphicon glyphicon-minus-sign'}

我希望New item 按钮将panel_item_fields 部分附加到关联表的末尾。我已经尝试了很多 data-association-insertion-node 和 data-association-insertion-traversal 属性的组合，但没有任何乐趣。

Cocoon 使用data- 属性设置变量insertionTraversal 和insertionNode，在以下jQuery 代码中使用：

$this[insertionTraversal](insertionNode)

但我真的不知道如何阅读。

编辑： 如果我使用：

'data-association-insertion-node' => '.panel-items',
'data-association-insertion-method' => 'append',

新行被附加到页面上的每个表中，而不仅仅是最近的表。

Answer 1

似乎append'ing 到一个表附加到tbody，所以通过使New item 按钮成为表的兄弟：

.table-responsive
  %table.table.table-hover
    %tbody.panel-items
      = panel_form.simple_fields_for :panel_items do |panel_item_fields|
        = render 'panel_item_fields', f: panel_item_fields
  = link_to_add_association panel_form, :panel_items,
      'data-association-insertion-method' => 'append',
      'data-association-insertion-traversal' => 'prev',
      'data-association-insertion-node' => 'table',
      class: 'btn btn-success pull-right' do
    %span{class: 'glyphicon glyphicon-plus-sign'}
    New item

cocoon 现在可以附加到上一个表。

Answer 2

您是否尝试过：

 'data-association-insertion-method'    => 'append' 
 'data-association-insertion-node'      => '.panel-items'
 'data-association-insertion-traversal' => 'closest'

[更新：使用函数确定插入节点]

不久前更新了茧，所以data-association-insertion-node可以包含一个函数来确定插入节点，然后你可以做更精细的遍历，比如先上去做，然后再下去确定正确的地方。

例如类似的东西（从cocoon documentation复制）

$(".add_sub_task a").
    data("association-insertion-method", 'append').
    data("association-insertion-node", function(link) {
      return link.closest('.row').next('.row').find('.sub_tasks_form')
    });