CODEWITHSUNDEEP
knockout.jsknockout-2.0
rboarman
rboarman

Reputation: 8214

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

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:

enter image description here

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.

Upvotes: 14

Views: 6191

Answers (2)

Donatella
Donatella

Reputation: 41

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 :)

Upvotes: 4

John Earles
John Earles

Reputation: 7194

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

Upvotes: 32

Related Questions