16

Within my template in tbody below, how can I access the index of the item being rendered?

<table>
        <tbody data-bind="foreach:contacts">
            <tr class="contactRow" valign="top">
            <td><a href="#" data-bind="click: function(){viewModel.removeContact($data)}">Delete</td>
            <td><input data-bind="value: FirstName" name="Contacts[].FirstName"/></td>
            <td><input data-bind="value: LastName" name= "Contacts[].LastName"  /></td>
            <td><input data-bind="value: Username"  name="Contacts[].Username"/></td>
            <td><input data-bind="value: Email"   name="Contacts[].Email"/></td>
        </tr>
        </tbody>
        <thead>
            <tr>
                <th>Controls</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>

3 Answers 3

17

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/

1
  • +1. This is exactly what I was looking for to workaround lack of the nth-child(even) in IE7/8
    – lkurylo
    Apr 27, 2012 at 9:34
6

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'}"
4
  • 1
    I think this is clean and nice! May 12, 2012 at 16:02
  • Not only this is clean and nice it also allow us to access index in the deep level Oct 29, 2013 at 9:37
  • Does this work if the collection contains duplicate data? I'd suggest using $index knockoutjs.com/documentation/foreach-binding.html
    – geedubb
    Nov 16, 2018 at 10:37
  • I think this answer was given before $index existed; using $index is probably the preferred route in later versions of KO.
    – Lucent Fox
    Apr 12, 2019 at 17:11
4

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

1
  • Unfortunately it only works in foreach loops. I've tried it with knockout-sortable and the index isn't exposed there. I use Lucent's answer below.
    – Richard
    May 30, 2012 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.