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等大大们学习，不仅技术牛，还坚持写博客分享。

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