如何使用 jquery 和 rails 3 以嵌套形式发送动态参数？

Question

我是 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);
})

如果有人可以推荐一种更好的方法来选择那些我正在更改属性的元素，我将不胜感激。

Answer 1

如果您只收到提交的最后一个值，这可能是一个很好的提示，表明您有重复的 names 输入。您应该能够通过检查 .js 添加的 html（使用 firebug 或 webkit 检查器）来验证是否发生了这种情况。

查看您的函数，您正在初始化函数中的count 变量；一旦函数返回，它就会超出范围，因此每次调用函数时都会使用count = 1。您应该可以通过更改来解决此问题

count = 1;

到

count = $('#ingredient_list li').length;

（你也可以去掉函数末尾的增量，因为它什么都不做）。

您还需要确保更新 _destroy 隐藏字段的名称和 ID。