Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

knockout.js

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>
like image 617
ek_ny Avatar asked Jan 05 '12 14:01

ek_ny


People also ask

What is $data in knockout JS?

This is the raw view model value in the current context. Usually this will be the same as $data , but if the view model provided to Knockout is wrapped in an observable, $data will be the unwrapped view model, and $rawData will be the observable itself.

What is two way binding in knockout JS?

KO is able to create a two-way binding if you use value to link a form element to an Observable property, so that the changes between them are exchanged among them. If you refer a simple property on ViewModel, KO will set the form element's initial state to property value.

How do you activate a KnockoutJS model?

To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.

How do I use knockout js in HTML?

Create an HTML file and include knockout. js via a <script> tag. Add a second <script> tag under the knockout script. In this script tag, we'll initialize a view model and apply data binds to our Document.


1 Answers

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/

like image 176
RP Niemeyer Avatar answered Sep 30 '22 18:09

RP Niemeyer