使用 Twitter Bootstrap 和 Cocoon 的标签链接的唯一嵌套子标识符

Question

我有一个 Ruby on Rails 应用程序，其中一部分包含 Twitter Bootstrap 选项卡，用户可以使用 Simple Form 和 Cocoon 添加该部分的多个实例。

为了使选项卡链接正常工作，我必须为部分的每个新子项中的选项卡设置唯一名称（以便单击特定选项卡会激活其自己的唯一内容，而不是相同选项卡的内容前一个子部分中的名称出现在同一页面上）。

我看到代码被添加到 Cocoon 来实现这个目标：https://github.com/nathanvda/cocoon/pull/100。

在那次讨论中，有迹象表明新功能已在 Cocoon Simple Form Demo 项目中进行了试用。但是在尝试新功能的过程中所做的任何更改都没有在那里提交（至少据我所知）。

查看 github 上的提交，似乎已在 Cocoon javascript 代码中通过在“insertionNode.trigger”调用 (https://github.com/woto/cocoon/commit/cb206d501e4749a05e0c1d868911da159c8200c1) 的参数中添加“[contentNode]”来完成添加：

insertionNode.trigger('cocoon:before-insert', [contentNode]);

我对这些东西不是很熟练。

那么，如何实现/获取嵌套子项的每个新实例的唯一标识符？

任何帮助或指导将不胜感激。

这是我的应用程序中的代码供参考：

-# /app/controllers/parent_records_controller.rb

class ParentRecordsController < ApplicationController

  # GET /parent_records/1/edit
  def edit
    @parent_record = ParentRecord.find(params[:id])
    @parent_record.items.build
  end
end

-#/app/views/parent_records/_form.html.haml

.row-fluid
  =simple_form_for(@parent_record, :wrapper => :inline4, :html => {:class => 'form-inline', :multipart => true}) do |f|
    .row-fluid
      = f.simple_fields_for :items do |item|
        =render :partial => '/parent_records/form_partials/item', :locals => { :f => item }
      .row
        .span2.offset9
          = link_to_add_association 'Add Another Item', f, :items, :class => 'btn btn-primary', :partial =>     'parent_records/form_partials/item'
    = f.button :submit , :class => 'btn btn-success'

-#/app/views/parent_records/form_partials/_item ------ TAB HREF NAME is where I need the UNIQUE IDENTIFIERS ------

.nested-fields
  .well.span
    .tabbable
      %ul.nav.nav-tabs
        %li.active
          %a{"data-toggle" => "tab", :href => "#tab1"} Item Info 
        %li
          %a{"data-toggle" => "tab", :href => "#tab2"} Pictures

      .tab-content
        #tab1.tab-pane.active
          = f.input :short_name,:label => 'Item Title'
          = f.input :brand,:label => 'Brand'
          = f.input :description,:label => 'Description' 

        #tab2.tab-pane
          = f.simple_fields_for :pictures do |picture|
            =render :partial => '/parent_record/form_partials/picture', :locals => { :f => picture }
          .span2.offset9
            = link_to_add_association 'Add A Picture', f, :pictures, :class => 'btn btn-primary', :partial =>     'parent_records/form_partials/picture'
      .span2
        = link_to_remove_association "Remove Item", f, :class => 'btn btn-danger'

-#/app/views/parent_records/form_partials/_picture

.nested-fields  
  .well.span
    = f.input :image,   :label => 'Seclect Image to be Uploaded'
    = f.input :rank,    :label => 'Image Rank for this Item'
    .row
      .span2
        = link_to_remove_association "Remove Picture", f, :class => 'btn btn-danger'

编辑/后续问题：

下面 Nathan 的回答适用于添加唯一标识符，但添加唯一标识符破坏了 Bootstrap 的选项卡功能。鉴于我的印象是 Bootstrap javascript 可能仅在文档最初加载时评估选项卡和链接之间的对应关系，这似乎是有道理的。

谁能告诉我如何让 Bootstrap javascript 重新初始化并找到新的 id 和链接？

EDIT2

原来（我认为）是分隔 .nested-fields 和 .tabbable 的 div .well.span 阻止了 Bootstrap 能够初始化新命名的 href 和选项卡 ID。疯狂的旅程，但最终令人满意。

Answer 1

首先，在cocoon_simple_form_demo 项目中，您将看到最后一次提交使用cocoon:before-insert 或cocoon:after-insert 事件添加了动画。

after_insert 事件为您提供插入的 DOM 元素，因此您可以使用它做任何您喜欢的事情，例如填写唯一的href。

所以在你的情况下，这将类似于以下内容（注意：完全未经测试的代码，但我希望它能让你继续前进）：

$('form').bind('cocoon:before-insert', function(e,item_to_be_added) {
    new_id = new Date().getTime();
    item_to_be_added.find('a[href="#tab1"]').attr('href', "#tab1_" + new_id);
    item_to_be_added.find('#tab1').attr('id', "tab1_" + new_id);
    // do the same for #tab2
});

这只是标准的 jquery DOM 操作。希望这会有所帮助。

您可以在插入后重新触发选项卡行为（这需要在插入后，否则没有用处）：

   $('form').bind('cocoon:after-insert', function(e,item_to_be_added) {
       $('nav-tabs a').click(function(e) {
         e.preventDefault();
         $(this).tab('show');
       }); 
   });

您应该已经有了这样的代码？另一种选择是使用更好的on，像这样：

$('form').on 'click', '.nav-tabs a', function(e) {
    e.preventDefault(); 
    $(this).tab('show');
});

这应该只需要在页面加载时执行一次，并且在添加选项卡时这将继续工作。

HTH。