将模板项绑定到KnockoutJS中数组的索引

Question

我需要<div>'s在KnockoutJS模板中根据它们出现在Jquery插件列表中的位置命名,如下所示:

<div id="item1">...</div>
<div id="item2">...</div>
<div id="item3">...</div>

有没有办法使用KnockoutJS绑定到数组中的项目的索引？如果我必须使用ROWINDEX将这些数据添加到数据库中的select,那将是一种耻辱.

Answer 1

更新:KO现在支持$index您可以在foreach(或template使用foreachparam)中使用的上下文变量.文档:http://knockoutjs.com/documentation/binding-context.html

如果你可以使用jQuery模板{{each}},那么这样的东西将起作用:

<div data-bind="template: 'allItemsTmpl'"></div>
<script id="allItemsTmpl" type="text/html">
    {{each(i, item) items}}
    <div data-bind="attr: { id: 'item' + i }">
        <input data-bind="value: name" />
    </div>
    {{/each}}
</script>

如果你必须使用该foreach选项,那么这样的东西将起作用:

<div data-bind="template: { name: 'itemTmpl', foreach: items }"></div>
<button data-bind="click: addItem">Add Item</button>
<script id="itemTmpl" type="text/html">
    <div data-bind="attr: { id: 'item' + ko.utils.arrayIndexOf(viewModel.items, $data) }">
        <input data-bind="value: name" />
    </div>
</script> 

编辑:这些天我更喜欢创建一个我的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/

或者您可以采用这个想法并扩展observableArrays以提供一个indexed允许您通过调用来设置它的函数myObservableArray.indexed().

以下是一个示例:http://jsfiddle.net/rniemeyer/nEgqY/

Answer 2

使用Knockout 2.1.0及更高版本时,这更容易:

<div data-bind="foreach: items">
   <div data-bind="attr: { id : 'item' + $index() }"></div>
</div>

不需要花哨的脚本.

提醒一句: attr: { id : 'item' + $index }不行.由于$index是一个函数本身,未添加括号将导致您的id成为'item'和整个函数定义的串联!