javascript - Rails 嵌套属性 form_for for has_many 使用 javascript 无限嵌套模型

Question

所以我得到了一个非常简单的模型，其中设置了嵌套属性:

class Property < ActiveRecord::Base
  has_many :trees
  accepts_nested_attributes for :trees
end

然后我在我的 Controller 中构建它们:

class PropertiesController < ApplicationController

  def new
    @property = Properties.new
    @trees = @property.trees.build
  end
end

然后在我看来(使用 slim):

= form_for @property |p|
  = p.text_field :name

  .tree
    = p.fields_for :trees do |t|
      = t.text_field :fruit
      = t.select :quantity, (1..1000).to_a

    = link_to 'Add Another Tree', new_properties_path, id: 'new-tree'

然后在我的 js (coffeescript) 文件中，绑定(bind)到 '#new-tree' anchor 的点击事件:

event.preventDefault()
tree = $(event.target).parents('.tree')
tree.after tree.clone(true)

正如您所期望的那样工作，但是当我提交表单时，只有最后一个树参数被提交。这是因为在 form_for 生成的 html 中，我得到如下内容:

<input type="text" id="property_trees_attributes_0_fruit" name="property[trees_attributes][0][fruit]">
<select id="property_trees_attributes_0_quantity" name="property[trees_attributes][0][quantity]" class="valid">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  ...
</select>

当我克隆这个 html 时，我得到了其中包含 0 的名称和 ID，尽管我认为它应该是一个 1 来添加额外的树参数等.

我试图通过做这样的事情来补偿 js:

event.preventDefault()
tree = $(event.target).parents('.tree')
clone = tree.clone()
number = parseInt(clone.find('input[type=text]').attr('id').match /[0-9]/)
next = number + 1
clone = clone.html().replace /_(#{number})_|\[(#{number})\]/, next
section.after clone

正则表达式的要点是替换两个下划线或两个括号之间的任何数字，例如 _0_ 或 [0]

不过我的正则表达式似乎不起作用。它将 _0_ 替换为 1 并且这个解决方案对我来说似乎很乱。我会让正则表达式更简单，但是我不得不担心它会改变选择菜单选项的值。

有什么清理建议吗？我是否漏掉了一些非常明显的东西？

Answer 1

你遇到的问题是你只是在复制 DOM 元素 - 这是 IMO 的 hack，因为你没有预先构建你需要的对象(不会持久化数据等)

我们之前使用 Ajax 实现了“向 f.fields_for 添加额外字段”- 有一个 great tutorial here和一个 RailsCast here

---

child_index

你的问题的答案是使用 fields_for 帮助程序中的 child_index 选项，并使用 integer 时间戳:

<% index = Time.now.to_i %>
<%= f.fields_for :trees, child_index: index do |fields| %>
    #your fields here
<% end %>

---

代码

这是我们的工作:

#app/views/properties/new.html.erb
<%= form_for @property do |f| %>
   <%= render partial: "trees_fields", locals: { f: f, child_index: Time.now.to_i } %>
   <%= link_to "New Field", new_field_property_path %>
<% end %>

#app/views/properties/_trees_fields.html.erb
<%= f.fields_for :trees, child_index: child_index do |trees| %>
   <%= trees.text_field :your_attr %>
<% end %>

#app/controllers/properties_controller.rb
def new_field
    @property = Property.new
    @property.trees.build
    render "add_tree", layout: false
end

#app/views/properties/add_tree.html.erb
<%= form_for @property do |f| %>
      <%= render partial: "trees_fields", locals: {f: f, child_index: Time.now.to_i} %>
<% end %>

 #app/assets/javascripts/application.js.coffee
$ ->
  $(document).on "click", "#add_tree", (e) ->
     e.preventDefault();
     $.ajax
       url: '/messages/add_subscriber'
       success: (data) ->
              el_to_add = $(data).html()
          $('#trees_form').append(el_to_add)
       error: (data) ->
          alert "Sorry, There Was An Error!"