我是 Rails 新手,我正在尝试使用 jquery 实现我自己的动态字段。我已经将字段添加到表单中,但是我的参数没有按照我想要的方式发送。这是我的 jQuery:
$('form').on('click', '#add_ingredient', function(){
count = 1;
field = $('#ingredient_list li').first()
.clone()
.find('input')
.val('')
.end()
.find('input')
.prop({id: 'entry_ingredients_attributes_' + count + '_name', name: 'entry[ingredients_attributes][' + count +'][name]' })
.end();
$('#ingredient_list').append(field);
count += 1;
})
这允许我添加多个列表项,并且它们的 id 和名称会递增,因此它们是唯一的。
我已经正确设置了模型以使用 Accepts_nested_attributes_for,我正在创建一个烘焙日志,其中包含模型条目、成分和关联条目成分。我的问题如下:
当我提交表单时,即使我添加了多个字段,我也只会发送一种成分,只有最后一个会被提交。这是我提交包含超过 1 个成分的表单时我的参数的输出:
"ingredients_attributes"=>{"0"=>{"name"=>"Flour", "_destroy"=>"false"}, "1"=>{"name"=>""}}}}
如果您有兴趣了解它是如何创建的,这也是我的表格:
<div id="ingredients">
<%= f.fields_for :ingredients, @entry.ingredients.build do |builder| %>
<%= render 'ingredient_fields', :f => builder %>
<% end %>
</div>
<div id='add_ingredient'>Add Ingredient</div>
<div class="actions">
<%= f.submit %>
#_ingredient_fields
<ul id="ingredient_list">
<li>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.hidden_field :_destroy %>
<%= link_to "Remove", "#", :class => "remove_fields" %>
</li>
</ul>
谁能指出我正确的方向?
解决方案
按照 Zaid Crouch 在下面答案中的建议,结果证明我的选择器没有做正确的事情。我的 JS 现在是这样的:
$('form').on('click', '#add_ingredient', function(){
count = $('#ingredient_list li').length;
field = $('#ingredient_list li').first()
.clone()
.find('input')
.val('')
.end()
.find('input :first')
.prop({id: 'entry_ingredients_attributes_' + count + '_name', name: 'entry[ingredients_attributes][' + count +'][name]' })
.end()
.find('input :last')
.prop({id: 'entry_ingredients_attributes_' + count + '__destroy', name: 'entry[ingredients_attributes][' + count +'][_destroy]', value: 'false' })
.end();
$('#ingredient_list').append(field);
})
如果有人可以推荐一种更好的方法来选择那些我正在更改属性的元素,我将不胜感激。