alternate row style with $index binding

11,737

Solution 1

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

Solution 2

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

11,737

Author by

Leland Richardson

My name is Leland Richardson. I love learning. At the time of writing this I am 23 years old and live in Houston, TX. I was born in West Palm Beach, Florida, grew up in St. Louis, Missouri, and went to school in Houston, Texas at Rice University. At Rice I received two degrees: one in Physics and one in Mathematics. I love both. I never received any formal education on Computer Science, however, you will find that most of this blog will be about programming and web development. Nevertheless, I think being a good programmer is about being good at learning, and thinking logically about how to solve problems - of which I think my educational background has more than covered. Since high-school, I had found that the easiest way to make money was by programming. Programming started off as a hobby and small interest, and slowly grew into a passion. I have recently started working on a new startup here in Houston, TX. I wont bore you with the details of that just yet, but I am very excited about it and I think we can do big things. We plan to launch our project this year at SXSW 2013. What I will say for now, is that we would like to create a company of talented software developers who are similarly ambitious and want to create cool stuff (and have fun doing it).

Updated on July 31, 2022

Comments

Leland Richardson almost 2 years
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.
Ryan almost 12 years

Was just about to ask and then found your answer! Thanks :)
jes over 11 years

I was about to go crazy on this one.
Leland Richardson over 11 years

While I do agree with you, if you are trying to support < IE9.0, this pseudo-selector is not available. nevertheless, this question is mainly here to help people understand that the $index context variable is itself an observable. cheers :)
Dave Rael about 10 years

both of these answers have value. depending on context, there are many reasons to use one or the other and it's good to see both of these options here and it makes this question a good resource. this is exactly how stack overflow was intended to work.
Robini over 9 years

This was frustrating me for a while, thanks for the post! I didn't realise index was an observable.