KnockoutJs学习笔记（七）
if binding与visible binding类似。不同之处在于，包含visible binding的元素会在DOM中一直保存，并且该元素相应的data-bind属性会一直保持，visible binding只是利用CSS来触发元素的可见性。另一方面，if binding是物理地增加或删除包含它的元素，并且元素内的data-bind只有在判断语句为真时才生效。
下面是一个简单的if binding的例子：
js部分：
1 var viewModel = { 2 displayMessage: ko.observable(false) 3 }; 4 5 ko.applyBindings(viewModel);
html部分：
1 <input type="checkbox" data-bind="checked: displayMessage" /> Display message 2 <div data-bind="if: displayMessage">The message.</div>
下面是另一个if binding的例子：
js部分：
1 var viewModel = { 2 people: ko.observableArray([ 3 { name: "Kazusa", friends: [ "Chiaki", "Charlie" ] }, 4 { name: "Yuki", friends: null } 5 ]) 6 }; 7 8 ko.applyBindings(viewModel);
html部分：
1 <ul data-bind="foreach: people"> 2 <li> 3 Name: <span data-bind="text: name"></span> 4 <div data-bind="if: friends"> 5 Friends: <span data-bind="text: friends"></span> 6 </div> 7 </li> 8 </ul>
页面显示效果如下：
之前已经提到，在if binding中，包含if binding的元素会依照判断语句的真伪来决定自己是否出现在页面中，如果判断语句本身是一个observable，则每当该observable变化时，包含if binding的元素会被动态地添加或是移除，它自身其他的data-bind也会随之生效或是失效。
if binding也支持无容器的控制流语法，一个简单的示例如下：
1 <ul> 2 <li>Item 1</li> 3 <!-- ko if: displayMessage --> 4 <li>Message</li> 5 <!-- /ko --> 6 </ul>
ifnot binding与if binding类似，只不过对判断语句结果的判断正好相反。这里有一个需要注意的地方是，假设viewModel中有一个属性displayMessage是一个observable，则data-bind= "ifnot: displayMessage"与data-bind= "if: !displayMessage()"的效果是一样的。在我们直接绑定observable的时候，我们是不需要添加括号的（个人理解是因为这里不涉及取或是更改observable的值，相应的判断由KO自己去做），而在对observable进行取反操作时，由于需要获取observable的值，我们在调用的时候是需要添加括号的。有的开发人员喜欢使用ifnot binding也是有这部分的原因。
