带有$ index绑定的备用行样式 [英] alternate row style with $index binding

问题描述

我无法使用foreach绑定上下文将替代行css类应用于挖空模板。我正在使用可用 $ index 上下文变量的knockout 2.1。

这是令人困惑的：

我的模板

 < li class =rowdata-bind = css：{alt：$ index％2}>< / li> 
  

导致没有应用 alt 类，但是：

 < li class =rowdata-bind =text：$ index>< / li> ; 
  

正常工作并显示行号。

解决方案

我挣扎了几分钟，发现这个问题从新绑定上下文变量（如 $ index ）已在knockout 2.1中引入

<我犯的错误是我忘记了 $ index 本身是一个可观察的，如果我们在数据绑定中的表达式中使用它，则必须将其解包属性。即，

 < li class =rowdata-bind =css：{alt：$ index％2} >< /锂> 
  

应该成为

 < li class =rowdata-bind =css：{alt：$ index（）％2}>< / li> 
  

woops：）

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.

解决方案

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

这篇关于带有$ index绑定的备用行样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！