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