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/
上面演示的是绑定的静态数组，如果我们使用ko强大的observable array，就可以实现动态双向绑定：
Demo：演示Foreach Binding到监控数组
http://jsfiddle.net/wbpmrck/dANBs/2/embedded/
例子中使用了$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/
1、这里的$data关键字同样是上下文的一种，在下一节会介绍。
2、虚拟节点绑定，不仅仅是变换了一种写法，主要是可以不依赖真实的DOM元素作为模板的容器来进行数据的绑定。
总结
今天主要介绍了ko中的foreach绑定，以及如何使用虚拟节点进行绑定，其实foreach绑定还可以自定义绑定的行为，我们也将在下一篇进行补充，今天就先到这里吧~。
感谢支持
如果本文对您有帮助的话，请别吝啬手中的推荐票哦~