KO中的if绑定

一、目的

if绑定在指定的表达式为真时（或者非空对象和非空字符串），让html标签显示并让它的绑定属性起作用。if绑定扮演着和visible绑定类似的角色。不同之处在于，visible绑定中，标签始终在DOM中，并且绑定一直在起作用，只是让该标签变得不可见而已。if绑定会真正的添加或删除标签，并根据表达式的真假，应用绑定属性。

二、例子

1.这个例子根据checkbox的选择状态是否显示一段文字(实际上是添加和删除)

<div class='liveExample'>
    <input type='checkbox' data-bind='checked:value'>点击显示文字</input>
    <div><span data-bind='if:value'>这是一段文字 </span></div>
</div>

// Here's my data model
var ViewModel = {
    value: ko.observable(false)
};

ko.applyBindings(ViewModel); // This makes Knockout get to work

效果图：

2、这个例子展示一些商品，有的商品有价格，而有的商品价格未知，则不显示

<ul data-bind="foreach: product">
    <li>name: <b data-bind="text: name"> </b>
        <div data-bind="if: price">price: <b data-bind="text: price"> </b>
        </div>
    </li>
</ul>

 ko.applyBindings({
     product: [{
         name: 'bread',
         price: null
     }, {
         name: 'beer',
         price: 12.3
     }]
 });

效果图：

如果去掉div中的if绑定，则是这样的一个结果：

因为bread的价格未知（null），所以并未创建price的标签。

3.基于注释的if绑定

有时候我们无法放置可绑定if的容器，例如ul中只能放置li标签，这时如果要动态显示和隐藏某一项，可以使用基于注释的绑定。

<input type='checkbox' data-bind='checked:value'>显示或隐藏列表项</input>
<ul>
    <li>第一项</li>
     <li>第二项</li>
     <li>第三项</li>
    <!-- ko if: value -->
        <li>这一项根据是否选中进行显示和隐藏</li>
    <!-- /ko -->
</ul>

 ko.applyBindings({
     value:ko.observable(false)
 });

效果图：