Rails verschachtelte Felder mit Bootstrap-Registerkarten

Question

Der Versuch, ein verschachteltes Formular in Rails zu erstellen, lässt sich jedoch mithilfe von Bootstrap-Registerkarten zusammenklappen.
Im Moment habe ich die folgenden:

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

Offensichtlich mit, wie verschachtelte Felder arbeiten mit den Edelstein cocoon dies schaffen eine neue _register_member_field mit der gleichen id für den Zusammenbruch. Das heißt, wenn Sie auf eine der Überschriften klicken, wird nur eines der verschachtelten Formulare geöffnet.
Irgendwelche Vorschläge, wie ich das richtig funktionieren lassen kann?

Answer 1

Ok, also von dem, was ich in Schienen sagen kann & JQUERY - wenn Sie willkürliche ID's in der Situation ohne die Notwendigkeit für ein DSL oder Modell, dass es wieder oben ist stecken - das ist Code Geruch (wenn Sie eine Tonne tun arbeiten für einen Hack, dass normalerweise andere Programmierer nur eine andere Methode verwenden würden, die dasselbe auf eine universelle Weise macht).

Ich denke, was Sie tun, ist im Wesentlichen versuchen, Rails-Code zu verwenden, um HTML-Code zu Jam-ID # in für den JQUERY-Code zu schreiben zu schreiben.

Da Sie bereits Cocoon mit JQUERY verwenden, verwenden Sie einfach bessere JQUERY-Selektoren (google '.selector'), um das gewünschte CSS/HTML-Element anzusprechen ... wenn Sie das DOM kennen, dann ' tut in dieser Hinsicht gut. Ich würde vorschlagen, auf ".child" zu zielen. Es gibt auch ein paar Tricks, um Themen zu diesem Thema zu machen ... Link. Dies entlastet die Notwendigkeit für einzigartige Werte, da Sie nur verwenden, was bereits da ist.

Der schöne Teil davon ist Kokon-Muster ist standardmäßig auf die "Eltern" von nested-fields Ziel. Das gibt Ihnen ein Beispiel, wie das funktioniert - vor allem, wenn Sie die Cocoon-Dokumentation über Callbacks lesen.

Grundsätzlich müssen Sie das Akkordeon Äquivalent nested-fields setzen (pick beliebigen Namen & es für alle Felder verwenden - Beispiel: ‚Akkordeon-Felder‘) um jeden spezifischen Zusammenbruch & dann JQUERY für den Klick für Akkordeon Punkt um das Elternteil von Akkordeonfeldern anzusprechen.

Bonus, hier ist ein Beispiel für dynamisch Targeting Akkordeon Felder - http://demos.jquerymobile.com/1.4.3/collapsible-dynamic/#&ui-state=dialog

ich es einmal vor ein paar Monaten in Gang gekommen - aber ich werde einige Zeit brauchen, um es zu sezieren - nur dieses Posting hier, weil dies die Technik ist & es ist schneller, als tatsächlich deinen ganzen Code für dich zu schreiben. Lassen Sie es mich wissen, wenn Sie irgendwelche Probleme haben, die die Eltern/Kind-Strategie mit JQUERY implementieren.