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

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属性为每个表单输入，以便通过淘汰赛的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> 

我真的不知道如何去了解这个（我是新来的淘汰赛。 JS）。我想我需要使用属性绑定以及$ 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>