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

Question

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

模型

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

浏览

应用程序/视图/页/ _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'

应用程序/视图/页/ _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附加到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'

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

前一段时间cocoon已更新，因此data-association-insertion-node可以包含一个确定插入节点的函数，然后你可以做更精细的遍历，比如先上去再去确定正确的位置。

E.g。类似的东西（从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')
    });