Knockout.js 3.1.0 使用 $index 上下文绑定输入名称和 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>

一切正常，但是，我想编辑每个表单输入的 name 属性，以便由敲除的 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 的新手）。我想我需要将属性绑定与 $index 上下文一起使用，但我不知道该怎么做。

Answer 1

你可以使用attr绑定...

<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>