[TOC]

入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

高级应用

插件

更多信息

"if" 绑定

目的

if 绑定可以控制标记是否在文档中出现 (并有 data-bind 绑定属性)，只用指定表达式的值为 true 时 (或者一个真实的值，如一个非空的对象或非空的字符串)。

The if binding causes a section of markup to appear in your document (and to have its data-bind attributes applied), only if a specified expression evaluates to true (or a true-ish value such as a non-null object or nonempty string).

if 和 visible 绑定起着类似的作用。 所不同的是，被 visible控制的元素，始终在DOM中所有的绑定属性依然会被应用在元素上，可见绑定只是使用css切换元素的可见性。然而 if 绑定，是从物理上添加货删除标记上的DOM元素(和其子元素)。

if plays a similar role to the visible binding. The difference is that, with visible, the contained markup always remains in the DOM and always has its data-bind attributes applied - the visible binding just uses CSS to toggle the container element’s visiblity. The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.

例 1

这个例子表明当检测的值发生变化时 if 绑定可以动态的添加和删除标记的部分。

This example shows that the if binding can dynamically add and remove sections of markup as observable values change.

Here is a message. Astonishing.

源码: View

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

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

源码: View model

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

例 2

在下面的示例中，

元素 “Mercury”想不会出现, 但 “Earth”将被填充出现。因为 Earth 的 capital 属性是非null, 而 “Mercury” 的capital 属性则为空。

In the following example, the

element will be empty for “Mercury”, but populated for “Earth”. That’s because Earth has a non-null capital property, whereas “Mercury” has null for that property.

<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>

重要的是要明白 if 绑定真的是让代码正常工作的关键。没有了它，当“Mercury” 的属性 capital 是 null时访问 capital.cityName 将会得到一个错误信息 . In JavaScript, you’re not allowed to evaluate subproperties of null or undefined values.

It’s important to understand that the if binding really is vital to make this code work properly. Without it, there would be an error when trying to evaluate capital.cityName in the context of “Mercury” where capital is null. 在 JavaScript中, 是不能访问值为 null 或 undefined 的子元素。

参数

  • 主参数

传入你要评估的值。如果表达式的结果为 true (或者一个为真的值),包含标记会出现在文档中，和任何 data-bind 绑定属性将被应用。如果表达式结果为 false， 包含标记的元素将被从文档中删除，并且绑定也不会被应用。

The expression you wish to evaluate. If it evaluates to true (or a true-ish value), the contained markup will be present in the document, and any data-bind attributes on it will be applied. If your expression evaluates to false, the contained markup will be removed from your document without first applying any bindings to it.

如果您的表达式包含任何 observable 值, 当其中任何值改变时表达式将被重新验证。在你的 if 块标记中，可以动态添加或删除元素. 当被重新添加时data-bind 将被重新应用到新的标记副本。

If your expression involves any observable values, the expression will be re-evaluated whenever any of them change. Correspondingly, the markup within your if block can be added or removed dynamically as the result of the expression changes. data-bind attributes will be applied to a new copy of the contained markup whenever it is re-added.

  • 附加参数

    • 无

注: 在没有容器元素的情况下使用 “if”

用时你可能想使用 if 绑定控制的元素没有可选的父容器。例如。你可能想控制的们一个

  • 总是和他的兄弟元素一起出现:

    class="en"Sometimes you may want to control the presence/absence of a section of markup without having any container element that can hold an if binding. For example, you might want to control whether a certain

  • element appears alongside siblings that always appear:

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

    在这个例子中, 你不能把 if 绑定放在

      上 (因为会影响到第一个
    • 元素), 并且你不能把任何容器元素包裹第二个
    •  (because HTML doesn’t allow extra containers within
        s).

        In this case, you can’t put if on the

          (because then it would affect the first
        • too), and you can’t put any other container around the second
        • (因为 HTML 不允许
            中出现其他标签)。

            为了解决这个问题，你可以使用基于注释标签的无容器的控制流的语法。例如，

            To handle this, you can use the containerless control flow syntax, which is based on comment tags. For example,

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

            和 注释作为开始/结束的标记，定义一个 “虚拟元素” 作为容器包裹在内。Knockout 将会应用此方法的绑定。

            The and comments act as start/end markers, defining a “virtual element” that contains the markup inside. Knockout understands this virtual element syntax and binds as if you had a real container element.

            依赖性

            除KO核心类库外，无依赖。

            (c) knockoutjs.com