jquery - rails 4 : Adding child_index to dynamically added (nested) form fields with Cocoon Gem

Question

更新:我正在尝试向涉及多个模型的嵌套表单添加/删除表单字段。我看过 Ryan Bates 的“Dynamic Forms”railscast，并且提到了 this article使用Cocoon Gem 。遵循那篇文章后，除了 child_index 之外，一切都完美运行。 child_index 仅出现在第一个 :kid 输入字段 (:name) 和第一个 :pet 输入字段 (:name 和 :age)。然后它返回到正在添加的字段的真实性 token 。

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

我通过从 application.html.erb 文件中删除 = javascript_include_tag :cocoon 解决了单击“添加”会添加两个字段而不是一个字段的问题。

我尝试添加 jQuery 和表单助手，但我不确定我输入的代码是否正确。

(我更改了模型对象以使关系更清晰)

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

when I click the "Remove Student" it removes every field above that link

这是您所关注的特定 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 的字段)，这意味着每当您“删除”一个字段时，它都会将选择所有这些。

<小时/>

解决此问题的方法是设置 child_index(我将在下面给您解释)。

说实话，我更愿意给你新的代码，而不是挑选过时的东西。

我在这里写过这个(尽管可以稍微修改一下): Rails accepts_nested_attributes_for with f.fields_for and AJAX

有一些 gem 可以为你做到这一点 - 一个叫做 Cocoon非常受欢迎，尽管许多人认为它不是“即插即用”解决方案。

尽管如此，最好知道这一切都是有效的，即使您确实选择使用像 Cocoon 这样的东西...

<小时/>

fields_for

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

你可能知道这一点；许多人没有。

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

创建“嵌套”表单(不添加/删除)功能的方法如下:

#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应该在父模型上。也就是说，您将数据传递到的模型(而不是接收数据的模型):

Nested attributes allow you to save attributes on associated records through the parent

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

这是一个标准表单，它将数据发送到您的 Controller ，然后发送到您的模型。模型中的 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

现在查看 View (请注意，您必须将表单拆分为部分):

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