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