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等。