Accessing Item Index in foreach Binding in KnockOut

Accessing Item Index in foreach binding

 

We often want to use the index of a current item in an array. For example, if we want to show the serial number along with the array item. Knockout provides a better way to access the index of items in an array, whether it is a normal array or an observable array.

 

The syntax $index / $index() provides the way to access the index of the current item in the array. But its value is only accessible within the context of the foreach block. $index is an observable and is updated whenever the index of the item changes.

 

Index	Item	value of $index for each Item in foreach binding
0	Item1	$index / $index()  = 0
1	Item2	$index / $index() = 1
2	Item3	$index  / $index() = 2
3	Item4	$index  / $index()  = 3
4	Item5	$index  / $index() = 4

 

For example: If we want to show the employee name with a serial number (index number) as in the following.

 

ViewModel

<script type="text/javascript">
function viewModelEmployee() {
    this.Employees = ko.observableArray([
        { Name: "Shiv", Code: "001" },
        { Name: "DJ", Code: "002" },
        { Name: "Rajneesh Rai", Code: "003" }
    ]);
}
var vmEmp = new viewModelEmployee();
$(function() {
    ko.applyBindings(vmEmp);
});
</script>

View

<table border="1">
    <thead>
        <tr>
            <td>Sr#</td>
            <td>Employee Name</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employees">
        <tr>
            <td data-bind="text : $index"></td>
            <td data-bind="text:Name"></td>
        </tr>
    </tbody>
</table>

But the received result is not practical since the serial number must start with 1. To do this we would use $index() + 1 as in the following:

<table border="1">
    <thead>
        <tr>
            <td>Sr#</td>
            <td>Employee Name</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employees">
        <tr>
            <td data-bind="text : $index() + 1"></td>
            <td data-bind="text:Name"></td>
        </tr>
    </tbody>
</table>

We have now accomplished our goal, in other words Serial number.

 

Precautions

 

1.    If you just want to use an index then you can use either $index or $index().

2.    If you want to use an index to append or add something to the index then use $index(). Otherwise if you use it like $index + 1 then something weird happens, it does not provide the intended result.

 

Possible use-case scenarios might be:

 

data-bind=; 'EmpID ' + ($index() + 1)	EmpID 1	DO Use
data-bind=" $index() + 1"	1	DO Use
data-bind=" 'EmpID ' + ($index + 1)"	Unexpected	DON'T Use
data-bind=" $index + 1"	Unexpected	DON'T Use