Rails 4: Hinzufügen von child_index zu dynamisch hinzugefügten (verschachtelten) Formularfeldern mit Cocoon Gem

UPDATED: Ich versuche, Formularfelder zu einem verschachtelten Formular mit mehreren Modellen hinzuzufügen / zu entfernen. Ich habe den Railcast "Dynamic Forms" von Ryan Bates gesehen und auf @ verwieseDieser Artike Verwendung derCocoon Gem. Das Befolgen dieses Artikels hat dazu geführt, dass bis auf den child_index alles perfekt funktioniert. Der child_index ist nur auf dem ersten @ vorhand:kid Eingabefeld :name) und das erste:pet Eingabefelder :name und:age). Dann geht es zurück zu einem Authentizitätstoken für die Felder, die hinzugefügt werden.

Ich habe alle JS- und Hilfsmethoden entfernt und verwende stattdessen einige der Cocoon-Methoden, die in JS integriert sind.

Ich habe das Problem behoben, bei dem durch Klicken auf "Hinzufügen" zwei Felder anstelle von einem hinzugefügt wurden, indem das @ entfernt wurd= javascript_include_tag :cocoon von demapplication.html.erb Datei

Ich habe versucht, jQuery- und Formular-Helfer hinzuzufügen, bin mir aber nicht sicher, ob ich den Code richtig eingegeben habe.

(Ich habe die Modellobjekte geändert, um die Beziehungen klarer zu machen.)

parent.rb Datei:

class Parent < ActiveRecord::Base

has_many :kids
has_many :pets, through: :kids # <<<<<< ADDED KIDS USING 'through:'

kid.rb Datei:

class Kid < ActiveRecord::Base

belongs_to :parent
has_many :pets
accepts_nested_attributes_for :pets, reject_if: :all_blank, allow_destroy: true
validates :name, presence: true

pet.rb Datei:

 class Pet < ActiveRecord::Base

 belongs_to :kid

 validates :name, presence: true

 validates :age, presence: true

Dies ist meine _form.html.erb-Datei:

 <%= form_for @parent do |f| %>
  <% if @parent.errors.any? %>
   <div class="alert alert-danger">
    <h3><%= pluralize(@student.errors.count, 'Error') %>: </h3>

         <ul>
            <% @student.errors.full_messages.each do |msg| %>
                <li><%= msg %></li>
            <% end %>
         </ul>
    </div>
 <% end %>

   <div class="inline">
     <div>
        <%= f.fields_for :kids do |kid| %>
         <%= render 'kid_fields', f: kid %>
        <% end %>
           <div>
            <%= link_to_add_association "Add Kid", f, :kids, id: 'add_kid',
            'data-association-insertion-method' => 'before',
            'data-association-insertion-traversal' => 'closest' %>
           </div>
        <% end %>   
     </div>


    </div>
        <div class="form-actions">
            <%= f.submit 'Create Parent', class: 'btn btn-primary' %>
        </div>

<% end %>

Dies ist meine _kid_fields.rb-Datei:

    <div class="nested-fields">

     <div class="kid-fields inline">
      <%= f.hidden_field :_destroy, class: 'removable' %>
      <%= f.text_field :name, class: 'form-control', placeholder: 'Kid's Name', id: 'kid-input' %>
        <div>
         <%= link_to_remove_association 'Remove Kid', f %>
        </div>


        <%= f.fields_for :pets do |pet| %>
         <%= render 'pet_fields', f: pet %>
        <% end %>
      </div>    
      <div>
       <%= link_to_add_association "Add Pet", f, :pets, id: 'add_pet',
            'data-association-insertion-method' => 'before' %>
      </div>
    </div>

Dies ist meine _pet_fields.rb-Datei:

    <div class="nested-fields">
     <div class="pet-fields">
      <%= f.hidden_field :_destroy, class: 'removable' %>
      <%= f.text_field :name, placeholder: 'Pet Name', id: 'pet-name-input' %>
      <%= f.text_field :age, placeholder: 'Pet Age', id: 'pet-age-input' %>  
      <%= link_to_remove_association 'Remove Pet', f, id: 'remove_pet' %>
     </div>  
    </div>

Antworten auf die Frage(4)

Ihre Antwort auf die Frage