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也是有这部分的缘由。