HTML在构造参数时遵循什么规则？

Question

我正在使用 Rails 根据一组复杂的嵌套属性自动创建子对象。因此，我需要以非常特殊的方式嵌套参数。显然，我意识到我可以用 JS 构建它们，但是我希望表单的顺序能够自动帮助构建。对于上下文，我有 2 列，由 2 <td>s 表示。每列可以创建新记录或编辑现有记录。当然，要修改现有记录时，必须传递记录的id。

渲染出来的HTML如下：

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="delivery" data-instructions="test instructions" data-id="1" data-amount="20">
  <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="delivery">
    <input class="labeler-response" name="type_logistics_attributes[][id]" type="hidden" value="1">
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" value="test instructions">
  </span>
</td>

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0">
  <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged">
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup">
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20">
    <span class="area-to-inject-type-of-amount">
      <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics">
    </span>
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions">
  </span>                      
</td>

在这种情况下，第一个 <td> 正在修改 id 为 1 的现有记录，而第二个 <td> 正在提供创建新记录的参数。创建新记录时，还会创建子 charged_amounts。因此，这些是我期望的参数：

"type_logistics_attributes"=>[
  {"id"=>"1", "instructions"=>"test instructions"},
  {"type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"}
]

相反，我得到以下内容：

"type_logistics_attributes"=>[
  {"id"=>"1", "type_of_logistics"=>"pickup", "instructions"=>"test instructions", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}]}, 
  {"instructions"=>"123 Fake street"}
]

不知何故，<td> 边界不起作用，子 charged_amount 属性不知何故被归入第一个 <td> 现有记录修改中。

谢谢！

Answer 1

不是<td> 或任何类似的HTML 元素构成输入的“边界”，它只是<form> element。 <form> 标签内的所有输入都由浏览器在提交表单时作为参数发送。您可能在一个 <form> 中有两列，这就是为什么两列的参数在 params 中混合使用。

Answer 2

据我所知，您可以以一种形式获取两个参数但嵌套方式不同的唯一方法是，如果您为新输入字段提供一些 id。这就是区分type_logistics_attributes 数组元素的原因。

我也有类似的需求，我使用了ryanb's nested form。当我将它用于与您相同的目的时，它的作用是为新的输入字段提供一个随机 id。这就是它的区别。

希望这会引导您朝着正确的方向前进。

Answer 3

我不确定是否有一种方法可以根据您的需要专门执行此操作，但您可以使参数看起来像这样：

"type_logistics_attributes"=>[
  {"id"=>"1", "instructions"=>"test instructions"},
  {"id"=>"1", "type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"}
]

您可以通过在此处添加额外的隐藏输入重复 id 来实现：

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0">
  <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged">
    <input name="type_logistics_attributes[][id]" type="hidden" value="1">
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup">
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20">
    <span class="area-to-inject-type-of-amount">
      <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics">
    </span>
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions">
  </span>                      
</td>

Rails 有一个处理此问题的规则：它在查询字符串中从左到右（或在 HTML 中从上到下）获取属性，并在每次看到重复属性时创建一个新对象。