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

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

观看次数

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 按钮在关联的 table 末尾附加 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',

新行将附加到页面上的每个 table，而不只是最接近的 table。

Answer 1

您尝试过：

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

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

不久前更新了cocoon，所以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')
    });

Answer 2

似乎 append 到 table 附加到 tbody，因此通过使 New item 按钮成为 table 的同级按钮:

.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 现在可以附加到之前的 table。

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

Cocoon/jQuery: append items to relevant table

jquery

ruby-on-rails

haml

cocoon-gem

型号

观看次数

app/views/pages/_form.html.haml

app/views/pages/_panel_item_fields.html.haml