码迷,mamicode.com
首页 > 其他好文 > 详细

Kendo MVVM 数据绑定(八) Style

时间:2019-02-11 17:05:39      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:script   ble   UNC   return   数据   显示   var   tag   fun   

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>

42

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

Kendo MVVM 数据绑定(八) Style

标签:script   ble   UNC   return   数据   显示   var   tag   fun   

原文地址:https://www.cnblogs.com/miaosj/p/10362334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!