if bind

25 November 2015

作用

if 绑定控制文档的一块区域显示，if 表达式为 true时显示，否则不显示。

if 和 visible bind 作用相似。区别在于，visible包含DOM代码，只是利用css来控制DOM显示与否；但是if 绑定是如果表达式为false，就移除了改DOM节点，如果为 true 就展示出来。

例子 1

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>

<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>


ko.applyBindings({
    displayMessage: ko.observable(false)
});

例子2

<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>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null }, 
            { name: 'Earth', capital: { cityName: 'Barnsley' } }        
        ]
    });
</script>

例子2 中，只有当 capital 有对象的时候，才会有子节点的代码执行。

if 绑定是很重要的，它能让代码正常工作。 比如上面的例子，如果没有 if 绑定， 那么当 capital 为空的时候， 子节点 capital.cityName 这个属性是不存在的，代码会报错。

参数

js表达式，返回true或者false

如果表达式包含 observable 变量，那么当变量值重新计算时，表达式的值也会被重新计算。相应的，当表达式的值被重新计算后 ，if 里面的代码块会被重新添加或者移除 。当重新添加代码块时，data-bind 属性会被应用到原来代码的新拷贝上。

注意 使用 if 时不要使用包含元素

<ul>
    <li>This item always appears</li>
    <li>I want to make this item present/absent dynamically</li>
</ul>

加入li需要 if 来控制显示与否，而ul中又不允许使用其他元素，那么这时候可以用虚拟元素绑定，像下面这样。

<ul>
    <li>This item always appears</li>
    <!-- ko if: someExpressionGoesHere -->
        <li>I want to make this item present/absent dynamically</li>
    <!-- /ko -->
</ul>