Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style
Style绑定可以通过ViewModel绑定到DOM元素CSS风格属性,例如:
1
<
span
data-bind="style: {color: priceColor, fontWeight: priceFontWeight},
2
text: price"></
span
>
3
4
<
script
>
5
var viewModel = kendo.observable({
6
price: 42,
7
priceColor: function() {
8
var price = this.get("price");
9
10
if (price <= 42) {
11
return "#00ff00";
12
} else {
13
return "#ff0000";
14
}
15
},
16
priceFontWeight: function() {
17
var price = this.get("price");
18
19
if (price <= 42) {
20
return "bold";
21
} else {
22
return ""; //will reset the font weight to its default value
23
}
24
}
25
});
26
27
kendo.bind($("span"), viewModel);
28
</
script
>
这个例子显示:
1
<
span
style
=
"color: #00ff00; font-weight: bold"
>42</
span
>
42
要注意的是CSS属性的名称,如果CSS名称中含有连字符(-),比如font-weight, font-size ,background-color等,在使用时需要省略到连字符,使用camel风格的命名,如fontWeight, fontSize,backgroundColor等。