Javascript MVVM模式前端框架—Knockout 2.1.0系列(8):控制流Control Flow(下篇):if和with绑定

*本文已经同步至索引目录:

好久没有写博客了,和园子里的几位大大比起来,真的是汗颜。不过好在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等大大们学习,不仅技术牛,还坚持写博客分享。

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

26人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册