knockout.js - 如何在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 使用手动订阅，以保持索引 observable 同步。

它的工作原理如下:

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