如何訪問knockout.js模板中的項目索引

Question

在我下面的tbody模板中，如何訪問正在呈現的項目的索引？

<table> 
     <tbody data-bind="foreach:contacts"> 
      <tr class="contactRow" valign="top"> 
      <td><a href="#" data-bind="click: function(){viewModel.removeContact($data)}">Delete</td> 
      <td><input data-bind="value: FirstName" name="Contacts[].FirstName"/></td> 
      <td><input data-bind="value: LastName" name= "Contacts[].LastName" /></td> 
      <td><input data-bind="value: Username" name="Contacts[].Username"/></td> 
      <td><input data-bind="value: Email" name="Contacts[].Email"/></td> 
     </tr> 
     </tbody> 
     <thead> 
      <tr> 
       <th>Controls</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Username</th> 
       <th>Email</th> 
      </tr> 
     </thead> 
    </table> 

Answer 1

更新：$index現已在KO 2.1中提供。

目前，沒有辦法直接訪問foreach中的索引。有一個拉請求，看看在這裏增加一個$index變量：https://github.com/SteveSanderson/knockout/pull/182

我過去使用的一個選項是使用一個手動預訂對一個observableArray保持索引可觀察同步。

它是這樣工作：

//attach index to items whenever array changes 
viewModel.tasks.subscribe(function() { 
    var tasks = this.tasks(); 
    for (var i = 0, j = tasks.length; i < j; i++) { 
     var task = tasks[i]; 
     if (!task.index) { 
      task.index = ko.observable(i); 
     } else { 
      task.index(i); 
     } 
    } 
}, viewModel); 

這裏有一個例子：http://jsfiddle.net/rniemeyer/CXBFN/

Answer 2

我這樣做，它的工作相當不錯。不是最好看的，但一切順序如下：

使用attr：binding設置字段的名稱屬性，然後使用$parent.CallForwards.indexOf($data) 來獲取您的索引。

data-bind="value: Name, attr: {name: 'CallForwards[' + $parent.CallForwards.indexOf($data) + '].Name'}" 

Answer 3

我相信它會與KO 2.1簡單：你可以用$指數在foreach循環來指代當前索引。

https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js

文檔：http://knockoutjs.com/documentation/binding-context.html