在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ Kendo MVVM 數據綁定(八) Style
準備
Kendo UI 特效概述
Kendo MVVM 數據綁定(三) Click
Kendo MVVM 數據綁定(十) Source
Kendo MVVM 數據綁定(二) Checked
Kendo MVVM 數據綁定(五) Events
UI Widgets 概述
Kendo MVVM 數據綁定(一) attr
單頁面應用(二) Router 類
單頁面應用(四) Layout
Kendo DataSource 概述
Kendo MVVM 數據綁定(四) Disabled/Enabled
Kendo MVVM 數據綁定(十一) Value
Kendo MVVM (二) ObservableObject 對象
單頁面應用(一)概述
Kendo UI 模板概述
Kendo MVVM 數據綁定(七) Invisible/Visible
Kendo MVVM 數據綁定(八) Style
初始化 Data 屬性
Kendo UI Validator 概述
單頁面應用(三) View
Kendo MVVM 數據綁定(九) Text
Kendo MVVM (一) 概述
移動應用開發(fā)簡介
Kendo MVVM 數據綁定(六) Html
使用 Kendo UI 庫實現(xiàn)對象的繼承

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