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＆amp; JQUERY - 如果你坚持任意身份，而不需要DSL或模型支持它 - 代码的味道（当你做了大量的工作时） hack，通常其他程序员只会使用另一种以通用方式执行相同操作的方法。）

我认为你正在做的事情本质上是尝试使用Rails代码来编写HTML代码以阻止ID＃进入JQUERY代码。

由于您已经使用JQUERY使用了茧，为什么不使用更好的JQUERY选择器（google＆＃39; .selector＆＃39;）来定位您想要的CSS / HTML元素...如果您已经了解DOM，那么你在这方面做得很好。我建议定位＆＃39; .child＆＃39;。还有一些技巧可以用来做主题... Link。这样可以减少对唯一值的需求，因为您只使用了已有的值。

这个美丽的部分是茧的模式，默认情况下已经是针对＆＃34;父母＆＃34; nested-fields。这将为您提供一个如何工作的示例 - 特别是如果您阅读有关回调的cocoon文档。

基本上，您需要将手风琴相当于nested-fields（选择任何一个名称并将其用于所有领域 - 例如：＆＃39; accordion-fields＆＃39;）围绕每个特定的崩溃和放大器;然后将您的JQUERY指向手风琴，点击该按钮以定位＆＃39; accordion-fields＆＃39;的父母。

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

几个月前我就开始了 - 但是我需要一些时间来解剖它 - 只是在这里张贴这个，因为这是技术＆amp;它比实际为您编写整个代码更快。如果您遇到使用JQUERY实现父/子策略的任何障碍，请告诉我。

Rails带引导选项卡的嵌套字段

1 个答案: