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
