knockoutjs五 if的绑定

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

<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绑定是很重要的，不信看看下面的这个例子：

<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是空或者是类空的元素，
那么其下的标记是不会显示的，避免了错误。

<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和我交流

knockoutjs五 if的绑定

knockoutjs五 if的绑定

谢谢大爷~