"if" 绑定

• 与visible binding类似，都可以控制一段内容是否出现在页面中。
• 与visible不同的是，if binding是真正的控制Html标签是否出现在DOM中，如果绑定的值为false,则Html标签不会出现在页面中。
• if绑定会修改DOM结构，所以出于性能考虑，不应该频繁修改if的绑定值。（这种情况应该使用visible binding）
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

基本用法

Html代码

<div data-bind="if: displayMessage">
     这是一段文本，只有当displayMessage为true时，才会放入页面中.
</div>

ko.applyBindings({
    displayMessage: ko.observable(false)//这里为false,所以该文本不会显示
});

"with" 绑定

         这个用法比较特殊：

• 生成一个新的binding context
• 后面的节点绑定到新的context

基本用法

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>

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对象，所以后面可以直接绑定他下面的经纬度属性。