KnockoutJs学习笔记（七）

浏览数：36 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

KnockoutJs学习笔记（七）