stile di riga alternativo con il binding dell'indice $

Question

Ho problemi a ottenere una classe css di riga alternativa applicata a un modello a eliminazione diretta con un contesto di bind foreach. Sto usando knockout 2.1 con la variabile di contesto $index disponibile.

Si tratta di che cosa è fonte di confusione:

mio modello

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

risultati in nessun alt classi applicate, però:

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

lavori correttamente e visualizza il numero di riga.

Answer 1

Ho lottato con questo per un paio di minuti e ho trovato che la questione non era in realtà stato coperto in quanto il nuovo binding context variables (come $index) era stato introdotto nel ko 2.1

L'errore che stavo facendo era che io semplicemente Dimentica che lo stesso $index è osservabile e deve essere scartato se lo si utilizza in un'espressione nell'attributo data-bind. vale a dire,

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

dovrebbe diventare

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

woops :)

Answer 2

Non fare alternano fila styling con Javascript, usare i CSS, che è il modo più efficiente :)

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