knockoutjs五 if的绑定

今天是大年初一,实在无聊,写点东西,希望大家新的一年有新的收获。

1
2
3
4
5
6
7
8
<label>
<input type="checkbox" data-bind="checked: displayMessage" /> Display message
</label>

<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
<script>
displayMessage = ko.observable(false);
</script>

if绑定和visible绑定有点相似的,visible是使用css让节点不显示,但是if是直接隐藏这个标记,不显示出来。大家可以f12查看下,看看他们的不同。

if绑定是很重要的,不信看看下面的这个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
</li>
</ul>
<script>
planets = ko.observableArray([{
name: 'Mercury',
capital: null
}, {
name: 'Earth',
capital: {
cityName: 'Barnsley'
}
}]);
</script>

数组中第一个capital元素是空的,如果直接绑定那么capital.cityName是会报错的,但是使用capital判断之后,如果是capital是空或者是类空的元素,
那么其下的标记是不会显示的,避免了错误。

1
2
3
4
5
6
<ul>
<li>This item always appears</li>
<!-- ko if:displayMessage -->
<li>I want to make this item present/absent dynamically</li>
<!-- /ko -->
</ul>

如上,想只判断第二个li元素,如果条件符合就显示,不符合就不显示,但是绑定在ul上会对两个都起作用,
这时候用一个虚拟节点,就避免了这个问题,大家要灵活的运用。

ifnot就是一个否定的if,用法一样,有时候想相反的时候可以用ifnot,还有要记得如果判定条件是一个函数,一定要记得加(),不然返回的是一个函数,是个非空的值,就不起作用了。
今天的例子就到这里,比较简单,代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。希望大家有意见可以留言,有疑问或者错误可以加我的qq1357197829和我交流