Question

更新：我正在尝试将表单字段添加/删除到涉及多个模型的嵌套表单。我看过Ryan Bates的“动态表单”导轨播放，我使用this article引用了Cocoon Gem。在该文章之后，除了child_index之外，一切都完美无缺。 child_index仅出现在第一个:kid输入字段（:name）和第一个:pet输入字段（:name和:age）上。然后它返回到正在添加的字段的真实性标记。

我已经删除了所有JS和帮助器方法，而是使用了一些内置JS的Cocoon方法。

我修复了问题，点击“添加”会从= javascript_include_tag :cocoon文件中删除application.html.erb，从而添加两个字段而不是一个字段。

我尝试过添加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文件：

 <%= 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 %>

这是我的_kid_fields.rb文件：

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

这是我的_pet_fields.rb文件：

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

Answer 1

当我点击＆＃34;删除学生＆＃34;它会删除该链接上方的每个字段

这是您所关注的特定RailsCast的一个众所周知的问题（它已经过时）。还有另一个here：

问题归结为child_index的fields_for references。

每次使用fields_for（这是您使用上述javascript功能复制的内容）时，它会为其创建的每组字段分配id。这些ids在params中用于分隔不同的属性;他们还会以HTML "id" property分配给每个字段。

因此，您遇到的问题是，由于每次添加新字段时都不会更新此child_index，因此它们都是相同的。由于你的link_to_add_fields助手没有更新JS（IE允许你追加完全相同child_index的字段），这意味着每当你＆＃34;删除＆＃34;一个字段，它将选择所有字段。

对此的修复是设置child_index（我将在下面给出解释）。

我更愿意为您提供新的代码，而不是通过您过时的东西来说实话。

我在这里写过这篇文章（虽然可以稍微打磨一下）： Rails accepts_nested_attributes_for with f.fields_for and AJAX

有宝石为你做这件事 - 一个名为Cocoon的人非常受欢迎，虽然不是＆＃34;即插即用＆＃34;许多人认为这是解决方案。

尽管如此，即使您选择使用Cocoon之类的内容，最好知道这一切都有效...

fields_for

要了解解决方案，您必须记住Rails创建 HTML 表单。

你可能知道这一点;很多人不会。

这一点非常重要，因为当您意识到 HTML 表单必须遵守 HTML 强加的所有约束时，您就会明白Rails是不是很多人似乎认为的魔术师。

创建＆＃34;嵌套＆＃34;的方法表单（不带添加/删除）功能如下：

#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 ，它在您需要的功能中起着至关重要的作用。

<强>动态

现在是动态表格。

第一部分相对简单... 删除字段是从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 %>

此应该为您呈现各种表单等，包括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()

Answer 2

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

Rails 4：使用Cocoon Gem将child_index添加到动态添加（嵌套）表单字段

2 个答案: