首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Kendo UI开发课程(19): Kendo MVVM 数据绑定(八) Style

2013-09-09 
Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) StyleStyle绑定可以通过ViewModel绑定到DOM元素CSS风格属

Kendo UI开发教程(19): Kendo MVVM 数据绑定(八) Style

Style绑定可以通过ViewModel绑定到DOM元素CSS风格属性,例如:

1<span data-bind="style: {color: priceColor, fontWeight: priceFontWeight},2             text: price"></span>3 4<script>5var viewModel = kendo.observable({6    price: 42,7    priceColor: function() {8        var price = this.get("price");9 10        if (price <= 42) {11            return "#00ff00";12        } else {13            return "#ff0000";14        }15    },16    priceFontWeight: function() {17        var price = this.get("price");18 19        if (price <= 42) {20            return "bold";21        } else {22            return ""; //will reset the font weight to its default value23        }24    }25});26 27kendo.bind($("span"), viewModel);28</script>

这个例子显示:

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

42

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

 

热点排行