Javascript MVVM模式前端框架—Knockout 2.1.0系列(6)：控制流Control Flow(上篇)

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

前言&基礎

各位好^_^,抱歉這么久沒有更新，最近一直在忙工作，晚上還要上課，今天終於可以抽點時間出來，繼續我們的Knockout之旅。

在本系列的前幾章出來之后，得到了不少園友的關注，在此也對大家表示感謝，謝謝你們給我繼續寫的動力。

也有一些朋友提出關於knockout和xx好壞的問題，我個人真心不想做這些無謂的比較，就好像設計模式是為了解決不同的問題，這些框架的作者最初也是為了實現一些目標、解決具體的問題去設計的，個人認為MVVM模式特別適合做一些前端互動操作比較頻繁的項目，比如在線聊天、比賽轉播、游戲等。如果大家有不同的意見，歡迎討論。

 

下面進入正題，我們前面介紹了基本的綁定，今天簡單的看一下“控制流”（Control Flow）中的foreach綁定，以及使用虛擬節點實現的foreach綁定。

關於control flow這個名字，官網沒有給出明確的解釋，我也是按照字面進行翻譯，就我的理解，控制流中的內容主要特點是：

• 可以影響DOM的節點數量
• 可以添加或新增新的DOM元素，而不僅僅是修改元素的屬性和樣式

Foreach Binding

• 控制流中最常見的綁定。
• 用於綁定數組到DOM元素中。
• 利用DOM元素作為數據綁定的“模板”
• 當然，也可以使用自定義模板，或者第三方模板插件，這塊內容將在第15節去介紹。

Virtual Element Binding(虛擬節點綁定)

其實只是實現控制流綁定的一種方式，也就是不使用HTML文檔中的元素作為模板，而是使用特殊的注釋符構成的虛擬元素，來實現綁定。從而解決一些問題。詳情參見下面的具體介紹。

實例講解：Foreach Binding

基本語法

Html代碼

<tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
</tbody>

Js代碼

  ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]
    });

Demo：演示Foreach Binding基本用法

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

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

 

上面演示的是綁定的靜態數組，如果我們使用ko強大的observable array，就可以實現動態雙向綁定：

Demo：演示Foreach Binding到監控數組

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

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

 

例子中使用了$parent關鍵字，這個涉及到“綁定上下文的概念”，將在下一節中專門介紹。

實例講解：Virtual Binding

基本語法

Html代碼：（注意HTML注釋中的部分）

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

Js代碼

ko.applyBindings({
        myItems: [ 'A', 'B', 'C' ]
    });

Demo：演示Virtual Binding基本用法

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

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

 

1、這里的$data關鍵字同樣是上下文的一種，在下一節會介紹。

2、虛擬節點綁定，不僅僅是變換了一種寫法，主要是可以不依賴真實的DOM元素作為模板的容器來進行數據的綁定。

總結

今天主要介紹了ko中的foreach綁定，以及如何使用虛擬節點進行綁定，其實foreach綁定還可以自定義綁定的行為，我們也將在下一篇進行補充，今天就先到這里吧~。

感謝支持

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