Style绑定可以通过ViewModel绑定到DOM元素CSS风格属性,例如:
<span data-bind="style: {color: priceColor, fontWeight: priceFontWeight}, text: price"></span> <script> var viewModel = kendo.observable({ price: 42, priceColor: function() { var price = this.get("price"); if (price <= 42) { return "#00ff00"; } else { return "#ff0000"; } }, priceFontWeight: function() { var price = this.get("price"); if (price <= 42) { return "bold"; } else { return ""; //will reset the font weight to its default value } } }); kendo.bind($("span"), viewModel); </script>
这个例子显示:
<span style="color: #00ff00; font-weight: bold">42</span>
42
要注意的是CSS属性的名称,如果CSS名称中含有连字符(-),比如font-weight, font-size ,background-color等,在使用时需要省略到连字符,使用camel风格的命名,如fontWeight, fontSize,backgroundColor等。