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绑定还可以自定义绑定的行为，我们也将在下一篇进行补充，今天就先到这里吧~。

感谢支持

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~