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