alternate row style with $index binding

javascript knockout.js knockout-2.0
Leland Richardson picture Leland Richardson · Jun 27, 2012 · Viewed 11.7k times · Source

I am having trouble getting an alternate-row css class applied to a knockout template with a foreach binding context. I am using knockout 2.1 with the available $index context variable.

This is whats confusing:

My Template

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

results in no alt classes being applied, however:

<li class="row" data-bind="text: $index"></li>

works properly and displays the row number.

Answer

Leland Richardson picture Leland Richardson · Jun 27, 2012

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

Related questions

Binding true / false to radio buttons in Knockout JS

In my view model I have a IsMale value that has the value true or false. In my UI I wish to bind it to the following radio buttons: <label>Male <input type="radio" name="IsMale" value="…

Read More
Subscribe to observable array for new or removed entry only

So yes I can subscribe to an observable array: vm.myArray = ko.observableArray(); vm.myArray.subscribe(function(newVal){...}); The problem is the newVal passed to the function is the entire array. Is there anyway I can get only the delta …

Read More
Knockout.js Make every nested object an Observable

I am using Knockout.js as a MVVM library to bind my data to some pages. I'm currently building a library to make REST calls to a web service. My RESTful web service returns a simple structure: { id : 1, details: { name: "…

Read More