if绑定

(1)、使用if binding可以控制某个组件动态显示,类似我们之前接触到的visible属性,不过此属性绑定过以后就不能更改,而if binding可以根据相应的条件控制组件是否显示,下面是一个简单的例子:

<script type="text/javascript" src="knockout-2.2.0.js">
</script>
<label>
    <input type="checkbox" data-bind="checked: displayMessage" />
    Display message
</label>
<div data-bind="if: displayMessage">
    Here is a message. Astonishing.
</div>
<script type="text/javascript">
    ko.applyBindings({
        displayMessage: ko.observable(false)
    });
</script>

此例根据checkbox是否勾选来控制是否显示下面的一个<div>。

我们也可以使用if来判断某个元素是否为null,如果为null则不会显示,如下:

<script type="text/javascript" src="knockout-2.2.0.js">
</script>
<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>

此例中如果capital为null,则不会进行显示。此时,如果没有if进行判断的话,则在使用capital.cityName时就会出错。

If Binding

与visible binding类似,都可以控制一段内容是否出现在页面中。

与visible不同的是,if binding是真正的控制Html标签是否出现在DOM中,如果绑定的值为false,则Html标签不会出现在页面中。

if绑定会修改DOM结构,所以出于性能考虑,不应该频繁修改if的绑定值。(这种情况应该使用visible binding)

如果与observable或者computed属性绑定,则会产生双向绑定效果。