jquery - 茧/jQuery : append items to relevant table

Question

我有一个 Rails View ，允许将多个 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

观看次数

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'添加到表会附加到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 现在可以追加到上一个表中。