knockoutjs五 if的绑定

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