Javascript MVVM模式前端框架—Knockout 2.1.0系列(5)：文本和樣式綁定(下篇)

*本文已經同步至索引目錄：http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html

前言&基礎

大家好，通過前面的一系列介紹和demo，相信大家已經對knockout的綁定有了感性的認識，通過內置的綁定，我們已經可以在頁面上展示文本、html,並且與我們的viewModel對象實現雙向更新了。

今天我們繼續介紹其他的幾個重要的文本和樣式相關的內置綁定，他們分別是：

• css綁定
• style綁定
• attr綁定

CSS Binding(CSS類名綁定)

• ko內置的基礎綁定之一 。
• 用於控制DOM元素的class屬性(因此個人認為叫做class binding更直接一些)。
• 會根據所綁定的bool值（或者可以返回bool值的js表達式），給元素 移除/添加 對應的class名稱
• 如果與observable或者computed屬性綁定，則會產生雙向綁定效果。

Style Binding(Style屬性綁定)

同樣是用於控制樣式，不過該綁定用於控制樣式的細節：

• 控制DOM元素的Style屬性，比如color,width等
• 會根據所綁定的bool值（或者可以返回bool值的js表達式），給元素 移除/添加 對應的Style屬性
• 如果與observable或者computed屬性綁定，則會產生雙向綁定效果。

Attr Binding(attr屬性綁定)

這個綁定可以用於給DOM元素添加自定義屬性，或綁定到已有的屬性：

• 控制DOM元素的任意屬性，比如href等
• 會根據所綁定的bool值（或者可以返回bool值的js表達式），給元素 移除/添加 對應的屬性
• 如果與observable或者computed屬性綁定，則會產生雙向綁定效果。

實例講解：CSS Binding

基本語法

Html代碼

<div data-bind="css: { myClass: enableMyClass }">
  some text
</div>

Js代碼

var viewModel = {
        enableMyClass: ko.observable(false) //默認為false
    };
    viewModel.enableMyClass(true);//設為true,則div的class有效

 

Demo：演示CSS Binding基本用法

http://jsfiddle.net/wbpmrck/M8Z6x/1/embedded/

看不到內嵌Demo的點這里查看在線Demo

實例講解：Style Binding

基本語法

Html代碼

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
   Profit Information
</div>

Js代碼

var viewModel = {
        currentProfit: ko.observable(150000) // 初始化，內容黑色
    };
    viewModel.currentProfit(-50); //div內容變為紅色

Demo：演示Style Binding基本用法

http://jsfiddle.net/wbpmrck/M8Z6x/2/embedded/

看不到內嵌Demo的點這里查看在線Demo

實例講解：Attr Binding

基本語法

Html代碼

<a data-bind="attr: { href: url, title: details }">
    Report
</a>

Js代碼

 var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("這段文本將會作為a標簽的title")
    };

Demo：演示Attr Binding基本用法

http://jsfiddle.net/wbpmrck/M8Z6x/4/embedded/

看不到內嵌Demo的點這里查看在線Demo

總結

今天主要介紹了ko中的CSS Binding、Style Binding和Attr Binding用法，至此，和文本與樣式有關的內置綁定就介紹完了。這些綁定都是非常基礎的功能，在日常開發過程中也是經常使用的，結合ko.observable和computed來使用，可以大大簡化我們的代碼結構，提高工作效率。

感謝支持

如果本文對您有幫助的話，請別吝嗇手中的推薦票哦~