Rails 4:使用Cocoon Gem将child_index添加到动态添加(嵌套)表单字段

Question

更新:我正在尝试将表单字段添加/删除到涉及多个模型的嵌套表单.我已经看过Ryan Bates的"动态表格"轨道广播,我已经使用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

当我点击"删除学生"时,它会删除该链接上方的每个字段

这是您所关注的特定RailsCast的一个众所周知的问题(它已过时).还有另一种在这里:

这个问题归结为child_index对的fields_for引用.

每次使用时fields_for(这是您使用上述javascript功能复制的内容),它会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

有宝石为你做这个 - 一个叫做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应该在父模型上.也就是说,您传递数据的模型(不是接收数据的模型):

嵌套属性允许您通过父级保存关联记录的属性

#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- 这为每个设置了一个唯一的ID fields_for,允许我们根据需要区分每个字段.

让这个动态变成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()