Knockout.js 3.1.0 使用 $index 上下文绑定(bind)输入名称和 ID 属性

Question

我正在使用 Knockout.js 构建购物车系统。目前，我将“订单”存储在一个名为 lineItems 的 observableArray 中，并使用一个删除 foreach 生成一个包含所有必需表单输入的表行。

<tbody data-bind="foreach: lineItems">
  <tr>
    <td><input data-bind="value: upc" name="Orders.upc"></td>
    <td><input data-bind="value: name" value="Orders.name"></td>
    ...
  </tr>
</tbody>

一切正常，但是，我想编辑每个表单输入的名称属性，以便由 knockout 的 foreach 循环添加的每一行都有一个唯一的名称。具体来说，我正在尝试从此更改结尾的 HTML:

  <tr>
    <td><input data-bind="value: upc" name="Orders.upc"></td>
    <td><input data-bind="value: name" value="Orders.name"></td>
    ...
  </tr>
  <tr>
    <td><input data-bind="value: upc" name="Orders.upc"></td>
    <td><input data-bind="value: name" value="Orders.name"></td>
    ...
  </tr>

对此:

  <tr>
    <td><input data-bind="value: upc" name="Orders.0.upc"></td>
    <td><input data-bind="value: name" value="Orders.0.name"></td>
    ...
  </tr>
  <tr>
    <td><input data-bind="value: upc" name="Orders.1.upc"></td>
    <td><input data-bind="value: name" value="Orders.1.name"></td>
    ...
   </tr>

我真的不确定该怎么做(我是 knockout.js 的新手)。我在想我需要将属性绑定(bind)与 $index 上下文一起使用，但我不确定该怎么做。

Answer 1

你可以使用attr绑定(bind)...

<tbody data-bind="foreach: lineItems">
   <tr>
      <td><input data-bind="value: upc, attr: {name: 'Orders.' + $index() + '.upc'}"></td>
      <td><input data-bind="value: name, attr: {name: 'Orders.' + $index() + '.name'}"></td>
   </tr>
</tbody>