How to access the index of an item in knockout.js template

Answer 1

I believe it gets easier with KO 2.1: you can use $index in the foreach loop to refer to the current index.

https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js

documentation: http://knockoutjs.com/documentation/binding-context.html

Answer 2

Update: $index is now available in KO 2.1.

Currently, there is not a way to directly access the index in a foreach. There is a pull request that looks at adding a $index variable here: https://github.com/SteveSanderson/knockout/pull/182

An option that I have used in the past is to use a manual subscription against an observableArray that keeps an index observable in sync.

It works 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);

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

Answer 3

I'm doing this and it's working pretty well. Not the best looking, but keeps everything in order:

Use the attr: binding to set the name attribute of your field and then use $parent.CallForwards.indexOf($data) to get your index.

data-bind="value: Name, attr: {name: 'CallForwards[' + $parent.CallForwards.indexOf($data) + '].Name'}"