Kendo UI 數(shù)據(jù)綁定(八) Style

Kendo MVVM 數(shù)據(jù)綁定(八) Style

Style 綁定可以通過 ViewModel 綁定到 DOM 元素 CSS 風(fēng)格屬性，例如：

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

這個(gè)例子顯示：

<span style="color: #00ff00; font-weight: bold">42</span>

42

要注意的是 CSS 屬性的名稱，如果 CSS 名稱中含有連字符（-），比如 font-weight, font-size ,background-color 等，在使用時(shí)需要省略到連字符，使用 camel 風(fēng)格的命名，如 fontWeight, fontSize,backgroundColor 等。