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>5var 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 value23 }24 }25});26 27kendo.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等。