Rails 带有 Bootstrap 选项卡的嵌套字段

Question

尝试在 rails 中创建嵌套表单，但使用 bootstrap 选项卡使其可折叠。
我目前有以下内容：

_form.html.rb

  <%= f.fields_for :register_members do |rm| %>

    <%= render 'register_member_fields', f: rm %>
  <% end %>

  <div class="links">
  <%= link_to_add_association "Add Registration", f, :register_members, class: "btn btn-success btn-sm text-white" %>
  </div>

_register_member_fields.html.erb

<div class="nested-fields">
  <div class="panel panel-default fields">

    <div class="panel-heading" role="tab" id="heading<%= f.index.to_s %>">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#tabCollapse<%= f.index.to_s %>" aria-expanded="true" aria-controls="tabCollapse<%= f.index.to_s %>">
            Registration
            <span class="panel-icon"></span>
        </a>
      </h4>
    </div><!-- End .panel-heading -->

    <div id="tabCollapse<%= f.index.to_s %>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<%= f.index.to_s %>">
      <div class="panel-body">
        <div class="field">
            <%= f.label "Name", class: "input-desc" %>
            <%= f.text_field :name, class: "form-control" %>
        </div>
        <div class="field">
            <%= f.label :email, class: "input-desc" %>
            <%= f.email_field :email, class: "form-control" %>
        </div>
        <div class="field">
            <%= f.hidden_field :_destroy %>
            <%= link_to_remove_association("Remove Registration", f) %>
        </div>
      </div><!-- End .panel-body -->
    </div><!-- End .panel-collapse -->  

  </div><!-- End .panel -->
</div>

显然，嵌套字段如何使用 gem cocoon 工作，这将创建一个新的 _register_member_field，使用相同的 id 进行折叠。这意味着单击任何面板标题只会折叠并打开其中一个嵌套表单。
关于如何让它正常工作有什么建议吗？

Answer 1

好的，据我在 rails 和 JQUERY 中所知道的 - 如果您将任意 ID 粘贴到情况中而不需要支持它的 DSL 或模型 - 就是这样代码异味（当你为 hack 做大量工作时，通常其他程序员只会使用另一种方法以通用方式做同样的事情）。

我认为您所做的实质上是尝试使用 Rails 代码编写 HTML 代码以将 ID# 塞入以供 JQUERY 代码使用。

既然你已经有了使用 JQUERY 的 cocoon，为什么不使用更好的 JQUERY 选择器 (google '.selector') 来定位你想要的 CSS/HTML 元素... 如果您知道 DOM，那么您在这方面做得很好。我建议定位“.child”。还有一些做主题的技巧...Link。这减轻了对唯一值的需求，因为您只是在使用已经存在的值。

这里最漂亮的部分是默认情况下茧的图案已经针对 nested-fields 的 "parent"。这给了你一个例子来说明它是如何工作的——特别是如果你阅读了关于回调的 cocoon 文档。

基本上，您需要在每个特定折叠周围放置相当于 nested-fields 的手风琴（选择任何一个名称并将其用于所有字段 - 例如：'accordion-fields'）然后指向您的 JQUERY 用于手风琴，用于点击以 'accordion-fields' 的父级为目标。

奖金，这是动态定位手风琴字段的示例 - http://demos.jquerymobile.com/1.4.3/collapsible-dynamic/#&ui-state=dialog

我在几个月前完成了一次 - 但我需要一些时间来剖析它 - 只是将其张贴在这里，因为这是技术而且它比实际为您编写整个代码要快。如果您在使用 JQUERY.

实施 parent/child 策略时遇到任何障碍，请告诉我

Rails 带有 Bootstrap 选项卡的嵌套字段

Rails Nested Fields with Bootstrap Tabs

ruby-on-rails

nested-forms

cocoon-gem

bootstrap-tabs