Take the 2-minute tour ×

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.

share|improve this question

3 Answers 3

up vote 20 down vote accepted

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

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) }">

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 {
}, 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/

share|improve this answer
Another option with the second method is add an "Index" property to your model that returns the same value as ko.utils.arrayIndexOf(.. etc - I've found that has solved my problem on a number of occasions :-) –  Adam Jun 15 '11 at 7:22
That last fiddle with the indexed() method is easily the best part of that answer, as it's easily reusable. –  alvin Mar 4 '12 at 5:11
This is awesome! Cheers! –  Mantisimo Mar 22 '12 at 12:06

This is much easier with Knockout 2.1.0 and above:

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

No fancy scripts necessary.

A word of caution: attr: { id : 'item' + $index } will NOT work. Since $index is a function itself, failing to add the parentheses will cause your id to be the concatenation of 'item' and the entire function definition!

share|improve this answer

Had the same problem but with a dependantObservable as source for the foreach template, alas the ko.utils.arrayIndexOf didn't work...

Solution: created a function that recreated the array returned by the dependantObservable and simply used the js indexOf function with the Item:

arrayIndexDO: function (item) {
    var filteredArray = ko.utils.arrayFilter(viewModel.someObservableArray(), function (element) {
        return element.id() == view.selectedId();
    var index = filteredArray.indexOf(item);
    return index;

Et voilà, the expected index in the jQuery tpl.

share|improve this answer

Your Answer


