Kendo MVVM 数据绑定(八) Style

发布时间：2020-12-14 04:25:10 所属栏目：大数据来源：网络整理

导读：Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性，例如： span data-bind ="style: {color: priceColor,fontWeight: priceFontWeight},text: price" / span script var viewModel = kendo.observable({ price: 42

Kendo MVVM 数据绑定(八) Style

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>

要注意的是 CSS 属性的名称，如果 CSS 名称中含有连字符（-），比如 font-weight,font-size,background-color 等，在使用时需要省略到连字符，使用 camel 风格的命名，如 fontWeight,fontSize,backgroundColor 等。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!