将模板项绑定到KnockoutJS中数组的索引 [英] Bind template item to the index of the array in KnockoutJS
问题描述
我需要根据它们在Jquery插件列表中出现的位置在KnockoutJS模板中命名<div>'s
,如下所示:
<div id="item1">...</div>
<div id="item2">...</div>
<div id="item3">...</div>
是否有一种方法可以使用KnockoutJS绑定到数组中项目的索引? 如果我不得不使用ROWINDEX将这些数据添加到数据库的select中,那将是一种耻辱.
更新:KO现在支持$index
上下文变量,您可以在foreach
(或template
中使用foreach
参数)中使用).文件: 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创建一个订阅,该订阅只需要对数组进行一次遍历,并创建/设置该项目上可观察的索引.像:
//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/ >
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屋!