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>