knockoutJS學習筆記05：控制文本和外觀綁定

測試數據：

    function Person(name,age){
        var self = this;
        self.name = ko.observable(name);
        self.age = ko.observable(age);
        self.isShow = ko.observable("");
        self.html = "<div>沒有div</div>",
        self.isRed = true
    }
    var person = new Person("tom",18);
    ko.applyBindings(person);    

 一、text 綁定

　　例如div、span 等標簽的文本顯示，text綁定是經過html編碼的。

    <div data-bind="text:name"></div>
    <span data-bind="text:18"></span>

 二、visible 綁定

　　如果變量或表達式為真，則正常顯示；否則設置：display:none。　　

    <div style="color:red;" data-bind="visible:isShow">顯示或不顯示</div>
    <div style="color:red;" data-bind="visible:age() >= 18">成年或未成年</div>

 　　這里有一個小小的建議，js中，為假的情況有：布爾類型的：false、數字類型的：0 、字符類型的:""， 還有 null 和 undifined。有時候看到有些人這樣寫：if(str != null && str != ""){...}，其實可以簡寫為：if(str){...}

三、html 綁定

　　設置元素的innerHTML屬性，不會對綁定內容進行html編碼，所以可以引起html攻擊。所以需要自己進行編碼，或者改用text綁定。　　

<div data-bind="html:html"></div>

 四、attr綁定

　　attr可以設置html元素的基本屬性，例如img 的 src 屬性，a 的href 屬性等。attr 屬性是一個對象，可以設置多個綁定屬性。

    <a data-bind="attr:{href:'default.aspx?name='+name(),title:name},text:name"></a>

 五、style 綁定

　　style綁定用於設置dom元素的樣式，根據變量或表達式的真/假，設置或移除樣式。如果樣式比較復雜的，建議用css綁定。

<div data-bind="style:{color:isRed ? 'red' : 'yellow' }">style綁定</div>

 六、css 綁定

　　css根據變量或表達式的真假，添加class屬性到dom元素。　　

<div data-bind="css:{red: isRed}">css綁定</div>   

七、總結

　　可以看到，ko除了可以用於數據綁定，還可以用於樣式綁定。總之就是讓我們盡量減少操作dom。上面還沒有提到表單域的相關綁定，會在后面說明。