在 KnockoutJS 中将模板项绑定到数组的索引 [英] Bind template item to the index of the array in KnockoutJS

问题描述

我需要根据它们在 Jquery 插件列表中出现的位置在 KnockoutJS 模板中命名

's，如下所示:

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

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

解决方案

更新:KO 现在支持 $index 上下文变量，您可以在 foreach 中使用它>(或带有 foreach 参数的 template).文档: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"/>

{{/每个}}

如果你必须使用 foreach 选项，那么这样的事情会起作用:

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

现在我更喜欢创建对我的 observableArray 的订阅，它只需要遍历数组并在项目上创建/设置一个索引 observable.喜欢:

//每当数组改变时附加索引到项目viewModel.tasks.subscribe(function() {var 任务 = this.tasks();for (var i = 0, j = tasks.length; i < j; i++) {var 任务 = 任务 [i];如果(！任务.索引){task.index = ko.observable(i);} 别的 {任务.index(i);}}}, 视图模型);

示例:http://jsfiddle.net/rniemeyer/CXBFN/

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

这是一个示例:http://jsfiddle.net/rniemeyer/nEgqY/>

I need to name the <div>'s in a KnockoutJS template according to the position that they appear in the list for a Jquery plugin like so:

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

Is there a way to bind to the index of the item in the array using KnockoutJS? It would be a shame if I had to add this data to the select on the database using ROWINDEX.

解决方案

update: KO now supports a $index context variable that you can use within a foreach (or template with foreach param). Docs: http://knockoutjs.com/documentation/binding-context.html

If you are okay with using jQuery Templates {{each}}, then something like this will work:

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

If you had to use the foreach option, then something like this would work:

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

Edit: these days I prefer to create a subscription to my observableArray that only has to take one pass through the array and create/set an index observable on the item. Like:

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

Sample here: http://jsfiddle.net/rniemeyer/CXBFN/

or you can take this idea and extend observableArrays to provide an indexed function that would allow you to set this up just by calling myObservableArray.indexed().

Here is a sample: http://jsfiddle.net/rniemeyer/nEgqY/

这篇关于在 KnockoutJS 中将模板项绑定到数组的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！