KnockoutJs学习笔记（七）

if binding与visible binding类似。不同之处在于，包含visible binding的元素会在DOM中一直保存，并且该元素相应的data-bind属性会一直保持，visible binding只是利用CSS来触发元素的可见性。另一方面，if binding是物理地增加或删除包含它的元素，并且元素内的data-bind只有在判断语句为真时才生效。

下面是一个简单的if binding的例子：

js部分：

 var viewModel = {
     displayMessage: ko.observable(false)
 };

 ko.applyBindings(viewModel);

html部分：

 <input type="checkbox" data-bind="checked: displayMessage" /> Display message
 <div data-bind="if: displayMessage">The message.</div>

下面是另一个if binding的例子：

js部分：

 var viewModel = {
     people: ko.observableArray([
         { name: "Kazusa", friends: [ "Chiaki", "Charlie" ] },
         { name: "Yuki", friends: null }
     ])
 };

 ko.applyBindings(viewModel);

html部分：

 <ul data-bind="foreach: people">
     <li>
         Name: <span data-bind="text: name"></span>
         <div data-bind="if: friends">
             Friends: <span data-bind="text: friends"></span>
         </div>
     </li>
 </ul>

页面显示效果如下：

之前已经提到，在if binding中，包含if binding的元素会依照判断语句的真伪来决定自己是否出现在页面中，如果判断语句本身是一个observable，则每当该observable变化时，包含if binding的元素会被动态地添加或是移除，它自身其他的data-bind也会随之生效或是失效。

if binding也支持无容器的控制流语法，一个简单的示例如下：

 <ul>
     <li>Item 1</li>
     <!-- ko if: displayMessage -->
     <li>Message</li>
     <!-- /ko -->
 </ul>

ifnot binding与if binding类似，只不过对判断语句结果的判断正好相反。这里有一个需要注意的地方是，假设viewModel中有一个属性displayMessage是一个observable，则data-bind= "ifnot: displayMessage"与data-bind= "if: !displayMessage()"的效果是一样的。在我们直接绑定observable的时候，我们是不需要添加括号的（个人理解是因为这里不涉及取或是更改observable的值，相应的判断由KO自己去做），而在对observable进行取反操作时，由于需要获取observable的值，我们在调用的时候是需要添加括号的。有的开发人员喜欢使用ifnot binding也是有这部分的原因。