Rails 4：使用Cocoon Gem将child_index添加到动态添加（嵌套）表单字段
更新：我正在尝试将表单字段添加/删除到涉及多个模型的嵌套表单。 我已经看过Ryan Bates的“动态表格”轨道广播，我已经使用Cocoon Gem参考了这篇文章 。 在该文章之后，除了child_index之外，一切都完美无缺。 child_index仅出现在第一个:kid输入字段（ :name ）和第一个:pet输入字段（ :name和:age ）上。 然后它返回到正在添加的字段的真实性标记。
我已经删除了所有的JS和帮助器方法，而是使用了一些内置JS的Cocoon方法。
我修复了问题，单击“添加”将通过从application.html.erb文件中删除= javascript_include_tag :cocoon来添加两个字段而不是一个。
我试过添加jQuery和表单助手，但我不确定我是否正确输入了代码。
（我更改了模型对象以使关系更清晰）
parent.rb文件：
class Parent < ActiveRecord::Base has_many :kids has_many :pets, through: :kids # <<<<<< ADDED KIDS USING 'through:'
kid.rb文件：
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文件：
class Pet < ActiveRecord::Base belongs_to :kid validates :name, presence: true validates :age, presence: true
这是我的_form.html.erb文件：
:
'before', 'data-association-insertion-traversal' => 'closest' %>
这是我的_kid_fields.rb文件：
'before' %>
这是我的_pet_fields.rb文件：
当我点击“删除学生”时，它会删除该链接上方的每个字段
这是您所关注的特定RailsCast的一个众所周知的问题（它已过时）。 这里有另一个：
问题归结为fields_for引用的fields_for 。
每次使用fields_for （这是您使用上述javascriptfunction复制的内容）时，它会为其创建的每组字段分配一个id 。 这些ids在params用于分隔不同的属性; 它们也被分配给每个字段作为HTML“id”属性 。
因此，您遇到的问题是，由于每次添加新字段时都没有更新此child_index ，因此它们都是相同的。 由于你的link_to_add_fields助手没有更新JS（IE允许你追加具有完全相同的child_index字段），这意味着每当你“删除”一个字段时，它将选择所有字段。
解决这个问题的方法是设置child_index （我将在下面给你一个解释）。
老实说，我宁愿给你新的代码而不是挑选你过时的东西。
我在这里写了这篇文章（虽然它可以稍微抛出一点）： Rails的accept_nested_attributes_for与f.fields_for和AJAX
有gem为你做这个 – 一个叫做Cocoon的非常受欢迎，虽然不是许多人认为的“即插即用”解决方案。
尽管如此，最好知道这一切都有效，即使你选择使用像Cocoon这样的东西……
fields_for
要理解解决方案，您必须记住Rails创建HTML表单。
你可能知道这个; 很多人没有。
这很重要，因为当你意识到HTML表单必须遵守HTML强加的所有约束时，你就会明白Rails并不是很多人认为的魔术师。
创建“嵌套”表单（ 没有添加/删除）function的方法如下：
#app/models/student.rb class Student < ActiveRecord::Base has_many :teachers accepts_nested_attributes_for :teachers #-> this is to PASS data, not receive end #app/models/teacher.rb class Teacher < ActiveRecord::Base belongs_to :student end
需要注意的一点是，您的accepts_nested_attributes_for应该在父模型上。 也就是说，您传递数据的模型（不是接收数据的模型）：
嵌套属性允许您通过父级保存关联记录的属性
#app/controllers/students_controller.rb class StudentsController < ApplicationController def new @student = Student.new @student.teachers.build #-> you have to build the associative object end def create @student = Student.new student_params @student.save end private def student_params params.require(:student).permit(:x, :y, teachers_attributes: [:z]) end end
构建这些对象后，您就可以在表单中使用它们：
#app/views/students/new.html.erb <%= form_for @student do |f| %> <%= f.fields_for :teachers |teacher| %> <% # this will replicate for as many times as you've "built" a new teacher object %> <%= teacher.text_field ... %> <% end %> <%= f.submit %> <% end %>
这是一个标准表单，它将数据发送到您的控制器，然后发送到您的模型。 模型中的accepts_nested_attributes_for方法将嵌套属性传递给依赖模型。
-
最好的办法是记下上面代码创建的嵌套字段的id 。 我手边没有任何例子; 它应该显示嵌套字段的名称，如teachers_attributes[0][name]等。
需要注意的重要事项是[0] - 这是child_index ，它在您需要的function中起着至关重要的作用。
动态
现在为动态表格。
第一部分相对简单... 删除字段是从DOM中删除它的情况。 我们可以使用child_index ，所以我们首先需要知道如何设置子索引等等...
#app/models/Student.rb class Student < ActiveRecord::Base def self.build #-> non essential; only used to free up controller code student = self.new student.teachers.build student end end #app/controllers/students_controller.rb class StudentsController < ApplicationController def new @student = Student.build end def add_teacher @student = Student.build render "add_teacher", layout: false end def create @student = Student.new student_params @student.save end private def student_params params.require(:student).permit(:x, :y, teachers_attributes: [:z]) end end
现在为视图（注意你必须将表单拆分为部分）：
#app/views/students/new.html.erb <%= form_for @student do |f| %> <%= f.text_field :name %> <%= render "teacher_fields", locals: {f: f} %> <%= link_to "Add", "#", id: :add_teacher %> <%= f.submit %> <% end %> #app/views/_teacher_fields.html.erb <%= f.fields_for :teachers, child_index: Time.now.to_i do |teacher| %> <%= teacher.text_field ....... %> <%= link_to "Remove", "#", id: :remove_teacher, data: {i: child_index} %> <% end %> #app/views/add_teacher.html.erb <%= form_for @student, authenticity_token: false do |f| %> <%= render partial "teacher_fields", locals: {f:f} <% end %>
这应该为您呈现各种forms等，包括fields_for 。 注意child_index: Time.now.to_i - 这为每个fields_for设置了一个唯一的ID，允许我们根据需要区分每个字段。
让这个动态变成JS：
#config/routes.rb resources :students do get :add_teacher, on: :collection #-> url.com/students/get_teacher end
使用此路由允许我们发送Ajax请求（以获取新字段）：
#app/assets/javascripts/.....coffee $ -> #Add Teacher $(document).on "click", "#add_teacher", (e) -> e.preventDefault(); #Ajax $.ajax url: '/students/add_teacher' success: (data) -> el_to_add = $(data).html() $('#subscribers').append(el_to_add) error: (data) -> alert "Sorry, There Was An Error!" #Remove Teacher $(document).on "click", "#remove_teacher", (e) -> e.preventDefault(); id = $(this).data("i") $("input#" + i).remove()
add this in your js.coffe file $(document).on 'click', 'form .remove_', (event) -> $(this).prev('input[type=hidden]').val('1') $(this).closest('fieldset').hide() event.preventDefault() $(document).on 'click', 'form .add_teacher', (event) -> event.preventDefault() time = new Date().getTime() regexp = new RegExp($(this).data('id'), 'g') $(this).before($(this).data('fields').replace(regexp, time))