使用JavaScript的无限制嵌套模型的has_many的Rails嵌套属性form_for

2019-10-29 20:37:23 阅读：222 来源： 互联网

标签：ruby-on-rails-4 javascript ruby-on-rails jquery regex

因此,我有一个非常简单的模型,其中设置了嵌套的属性：

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

然后我在控制器中构建它们：

class PropertiesController < ApplicationController

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

然后在我看来(使用苗条)：

= 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(咖啡脚本)文件中,绑定到“#new-tree”锚点的click事件：

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时,我得到的名称和ID带有0,尽管我认为添加其他树参数等应该为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]

我的正则表达式似乎不起作用.它仅用1代替了_0_,但无论如何,这种解决方案在我看来还是很混乱的.我会让正则表达式更简单,但是随后我不得不担心它会更改选择菜单选项的值.

有什么清理建议吗？我是否真的缺少明显的东西？

解决方法:

您遇到的问题是您只是在复制DOM元素-这是IMO hack,因为您没有事先构建所需的对象(不会持久保存数据等)

之前我们已经使用Ajax实现了“向f.fields_for添加额外的字段”-分别是great tutorial here和RailsCast here

child_index

您问题的答案是使用fields_for辅助程序中的child_index选项,并使其使用整数时间戳记：

<% 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!"

标签：ruby-on-rails-4,javascript,ruby-on-rails,jquery,regex
来源： https://codeday.me/bug/20191029/1962687.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用JavaScript的无限制嵌套模型的has_many的Rails嵌套属性form_for