Javascript MVVM模式前端框架—Knockout 2.1.0系列，8：控制流Control Flow
*本文已经同步至索引目录：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/
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来绑定了
});说明：
- 正如我在注释里说的，with的作用，就是把当前的绑定上下文切换到coords对象上，由于刚开始，绑定上下文是整个viewModel，也就是city、coords所在的对象，所以上面的text绑定可以使用city来绑定。
- 当使用了with之后，当前的context已经更深入了一层，编程了coords对象，所以后面可以直接绑定他下面的经纬度属性。
Demo：演示With Binding基本用法
http://jsfiddle.net/wbpmrck/EGY8W/4/embedded/
总结
今天主要介绍了ko中的If Binding、With Binding用法，至此，所有的“控制流绑定”就介绍完了。后面的章节我们会把KO内建很多实用绑定进行介绍~。
感谢支持
最近工作很忙，发现能够坚持写博客真的不容易。要向artech等大大们学习，不仅技术牛，还坚持写博客分享。
如果本文对您有帮助的话，请别吝啬手中的推荐票哦~