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

来源：互联网发布：ubuntu c语言编辑：程序博客网时间：2024/05/08 11:39

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 value
23        }
24    }
25});
26 
27kendo.bind($("span"), viewModel);
28</script>

这个例子显示：

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

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

0 0