我有一个 Ruby on Rails 应用程序,其中一部分包含 Twitter Bootstrap 选项卡,用户可以使用 Simple Form 和 Cocoon 添加该部分的多个实例。
为了使选项卡链接正常工作,我必须为部分的每个新子项中的选项卡设置唯一名称(以便单击特定选项卡会激活其自己的唯一内容,而不是在前一个子部分出现在同一页面上)。
我看到代码被添加到 Cocoon 来实现这个目标:https://github.com/nathanvda/cocoon/pull/100 .
在那次讨论中,有迹象表明新功能已在 Cocoon Simple Form Demo 项目中进行了试用。但是在尝试新功能的过程中所做的任何更改都没有在那里提交(至少据我所知)。
查看 github 上的提交,似乎已经在 Cocoon javascript 代码中通过将 '[contentNode]' 添加到 'insertionNode.trigger' 调用 (https://github.com/woto/cocoon/commit/cb206d501e4749a05e0c1d868911da159c8200c1 ) 的参数中来完成添加:
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 名称是我需要唯一标识符的地方 --- ---
.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 和链接?
编辑2
结果(我认为)它是 div
.well.span
分离 .nested-fields
和 .tabbable
这导致 Bootstrap 无法初始化新命名的 href
和标签 ID。疯狂的旅程,但最终令人满意。
最佳答案
首先,在 cocoon_simple_form_demo项目,你会看到最后一次提交添加了动画,使用 cocoon:before-insert
或 cocoon:after-insert
事件。after_insert
event 给你插入的 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。
关于ruby-on-rails - 使用 Twitter Bootstrap 和 Cocoon 的标签链接的唯一嵌套子标识符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14653390/