Knockout is not evaluating an expression when using $index in a binding

Question

Why is it, that when I try to use knockout.js to bind some text using $index, I get the code of a function instead of a number?

<tbody  data-bind="foreach: MyList">
  <tr>
    <td><span data-bind="text: $index + 1"></span></td>
  </tr>
</tbody>

Instead of getting 1, 2, 3 etc., I get this:

You can see, by the last character in the above image, that my index of zero is being added to 1. If I remove the '+ 1' from my binding, I get 0, 1, 2 instead of the function.

How do I tell knockout to evaluate the expression? I have the same issue when I submit the form. My string fields are being submitted as a function instead of the value.

Answer 1

$index is an observable, which is a function. Try <span data-bind="text: $index() + 1"></span>

Answer 2

If you use

<span data-bind="text: $index() + 1"></span> 

and for example your index value is 2, the text of your span will be: 21 and not 3.

you should define a function in your viewModel, like this:

self.itemNumber = function(index) {
    return index + 1;
}

and then in your span you should do:

<span data-bind="text: $root.itemNumber($index())"></span>

I hope this will help :)