estilo de fila alternativa con $ index binding

Question

Tengo problemas para aplicar una clase css de filas alternativas a una plantilla knockout con un contexto de enlace foreach. Estoy usando knockout 2.1 con la variable de contexto $index disponible.

Esto es cuál es confuso:

mi plantilla

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

que no resulta en alt clases que se aplican, sin embargo:

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

que funciona correctamente y muestra el número de fila.

Answer 1

Luché con esto durante un par de minutos y se encontró que esta pregunta realmente no había sido cubierto ya que el nuevo binding context variables (como $index) se había introducido en nocaut 2.1

El error que estaba haciendo era que simplemente Olvidé que $index sí mismo es un observable, y debe ser desenvuelto si lo estamos usando en una expresión en el atributo de enlace de datos. es decir,

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

debe convertirse en

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

woops :)

Answer 2

No haga alternativo estilo fila con Javascript, el uso de CSS, que es mucho más eficiente :)

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