Question

我正在使用Knockout.js构建一个购物车系统。目前，我将“Orders”存储在名为lineItems的observableArray中，并使用knockout 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属性，以便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>

我真的不确定如何解决这个问题（我是淘汰赛的新手）。我想我需要使用属性绑定和$ index上下文，但我不知道如何去做。

Answer 1

您可以使用attr绑定...

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

Knockout.js 3.1.0使用$ index context绑定输入名称和id属性

1 个答案: