knockoutjs

1. if 绑定

1） 目的

if绑定扮演着和visible绑定类似的角色。不同之处在于，visible绑定中，标签始终在DOM中，并且绑定一直在起作用，只是让该标签变得不可见而已。if绑定会真正的添加或删除标签，并根据表达式的真假，应用绑定属性。

2) 案例

• 根据checkbox的选择状态是否显示一段文字(实际上是添加和删除)

<div class='liveExample'>  
    <input type='checkbox' data-bind='checked:value'>点击显示文字</input>  
    <div><span data-bind='if:value'>这是一段文字 </span></div>  
</div> 
<script>  
var ViewModel = {  
    value: ko.observable(false)  
};  
  
ko.applyBindings(ViewModel); // This makes Knockout get to work  
</script>

• 展示一些商品，有的商品有价格，而有的商品价格未知，则不显示

<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>  
<script>  
ko.applyBindings({  
    product: [{  
        name: 'bread',  
        price: null  
    }, {  
        name: 'beer',  
        price: 12.3  
    }]  
});
</script>

• 基于注释的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>  
<script>  
ko.applyBindings({  
  value:ko.observable(false)   
});
</script>

value 为true