35

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.

Leland Richardson
  • 2,695
  • 2
  • 20
  • 27

2 Answers2

71

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

Leland Richardson
  • 2,695
  • 2
  • 20
  • 27
12

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

Maarten
  • 131
  • 1
  • 3
  • 4
    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 :) – Leland Richardson Mar 06 '13 at 02:38
  • 1
    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. – Dave Rael Apr 18 '14 at 11:31