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>