alternate row style with $index binding alternate row style with $index binding javascript javascript

alternate row style with $index binding


I struggled with this for a couple minutes and found that this question hadn't really been covered since the new binding context variables (like $index)had been introduced in knockout 2.1

The mistake I was making was that I simply forgot that $index itself is an observable, and must be unwrapped if we are using it in an expression in the data-bind attribute. ie,

<li class="row" data-bind="css: { alt: $index%2 }"></li>

should become

<li class="row" data-bind="css: { alt: $index()%2 }"></li>

woops :)


Don't do alternate row styling with Javascript, use CSS which is way more efficient :)

https://developer.mozilla.org/en-US/docs/CSS/:nth-child