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> <li>I want to make this item present/absent dynamically</li> </ul>
|
如上,想只判断第二个li元素,如果条件符合就显示,不符合就不显示,但是绑定在ul上会对两个都起作用,
这时候用一个虚拟节点,就避免了这个问题,大家要灵活的运用。
ifnot就是一个否定的if,用法一样,有时候想相反的时候可以用ifnot,还有要记得如果判定条件是一个函数,一定要记得加(),不然返回的是一个函数,是个非空的值,就不起作用了。
今天的例子就到这里,比较简单,代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。希望大家有意见可以留言,有疑问或者错误可以加我的qq1357197829和我交流