Railsネストされたフィールドとブートストラップタブ

Question

ネストされたフォームをレールに作成しようとしましたが、ブートストラップタブを使用して折りたたむことができません。
私は現在、次のを持っている：

これが作成されます宝石 cocoonを使用してどのように動作するか、ネストされたフィールドを持つ明らか

_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> 

同じidを崩壊に使用する新しい_register_member_field。つまり、パネル見出しのいずれかをクリックすると、入れ子になったフォームの1つが折りたたまれて開きます。
これを正しく動作させるための提案はありますか？

Answer 1

あなたがレールで教えてくれるものから& JQUERY - もしあなたが何かのIDをその状況に追いつけているなら、DSLやモデルを必要とせずに - それはコードの匂いです。通常、他のプログラマーは、普遍的な方法で同じことをする別の方法を使用する）ハックのために働きます。

あなたがやっていることは、Railsコードを使用して、JQueryコードが使用するJam ID＃のHTMLコードを書き込むことを基本的に試みていると思います。

あなたは既にJQUERYを使用しているコクーンがあるので、あなたが望むCSS/HTML要素をターゲットにするために、より良いJQUERYセレクタ（google '.selector'）を使用しないでください...あなたがDOMを認識しているなら、この点で良いことをしています。私は '.child'をターゲットにすることを提案します。これにテーマを実行するためのいくつかのトリックもあります... Link。すでに存在しているものを使用しているので、独自の値の必要性が軽減されます。

この美しい部分のコクーンのパターンは、既定ではすでにnested-fieldsという「親」をターゲットにしています。これはどのように動作するかの例を示しています。特にコールバックについての繭文書を読んでいる方が良いでしょう。

基本的に、あなたはnested-fieldsのアコーディオン同等の（&は、すべてのフィールドのためにそれを使用するすべてのONE名前を選択 - 例：「アコーディオンフィールド」）に配置する必要があり、それぞれ特定の崩壊&を中心に、[OK]をクリックしますのためにアコーディオンのためのあなたのjQueryを指します「アコーデオンフィールド」の親をターゲットにします。 http://demos.jquerymobile.com/1.4.3/collapsible-dynamic/#&ui-state=dialog

私はそれが数ヶ月前に一度起こってしまった - -

ボーナスは、ここでの動的ターゲットアコーディオンフィールドの例ですが、私はそれをanatomizeするためにいくつかの時間が必要になります - これは技術&あるので、ちょうどこのここに投稿しますそれは実際にあなたのためのコード全体を書くよりも速いです。あなたがJQUERYを使って親子戦略を実装している場合、私に知らせてください。