Kendo UI开发课程(19): Kendo MVVM 数据绑定(八) Style
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等。