Javascript MVVM模式前端框架—Knockout 2.1.0系列(8)：控制流Control Flow(下篇)：if和with綁定

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

前言&基礎

好久沒有寫博客了，和園子里的幾位大大比起來，真的是汗顏。不過好在KO的版本a仍是停留在2.1版本(不像某版本帝)，咱們這就繼續KO的學習。

PS:上一篇的內容雖然沒有很多的實例代碼，但是對我們理解KO的上下文是很有幫助的。建議先看一下上一篇，有助於理解本文的with binding。

好，今天接下來，我們把Control Flow中最后2個Binding說一下：

• if：如果綁定值為true(或者可以轉化為true),則渲染內部的元素
• with：修改當前Binding Context

 

正文

If Binding

• 與visible binding類似，都可以控制一段內容是否出現在頁面中。
• 與visible不同的是，if binding是真正的控制Html標簽是否出現在DOM中，如果綁定的值為false,則Html標簽不會出現在頁面中。
• if綁定會修改DOM結構，所以出於性能考慮，不應該頻繁修改if的綁定值。（這種情況應該使用visible binding）
• 如果與observable或者computed屬性綁定，則會產生雙向綁定效果。

With Binding

這個用法比較特殊：

• 生成一個新的binding context
• 后面的節點綁定到新的context

暫時不理解沒有關系，后面我們通過例子來搞懂with干了什么。

實例講解：If Binding

基本語法

Html代碼

<div data-bind="if: displayMessage">這是一段文本，只有當displayMessage為true時，才會放入頁面中.</div>

 

Js代碼

ko.applyBindings({
    displayMessage: ko.observable(false)//這里為false,所以該文本不會顯示
});

 

Demo：演示If Binding基本用法

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

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

 

PS:這里的第二個小例子，使用了ko的虛擬結點來實現if綁定，這在某些沒有‘容器元素’存在的場合，是十分有用的。

實例講解：With Binding

基本語法

Html代碼

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
</p>

 

Js代碼

 ko.applyBindings({
        city: "London",
        coords: {
            latitude:  51.5001524,
            longitude: -0.1262362
        }//這里coords對象下面有2個屬性。當coords被當做context的時候，后面就可以 直接使用latitude、longtitude來綁定了
    });

說明：

1. 正如我在注釋里說的，with的作用，就是把當前的綁定上下文切換到coords對象上，由於剛開始，綁定上下文是整個viewModel，也就是city、coords所在的對象，所以上面的text綁定可以使用city來綁定。
2. 當使用了with之后，當前的context已經更深入了一層，編程了coords對象，所以后面可以直接綁定他下面的經緯度屬性。

 

Demo：演示With Binding基本用法

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

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

總結

今天主要介紹了ko中的If Binding、With Binding用法，至此，所有的“控制流綁定”就介紹完了。后面的章節我們會把KO內建很多實用綁定進行介紹~。

感謝支持

最近工作很忙，發現能夠堅持寫博客真的不容易。要向artech等大大們學習，不僅技術牛，還堅持寫博客分享。

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