入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

高级应用

插件

更多信息

"visible" 绑定

目的

visible 绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。

The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.

例子

  1. <div data-bind="visible: shouldShowMessage">
  2.     You will see this message only when "shouldShowMessage" holds a true value.
  3. </div>
  5. <script type="text/javascript">
  6.     var viewModel = {
  7.         shouldShowMessage: ko.observable(true) // Message initially visible
  8.     };
  9.     viewModel.shouldShowMessage(false); // ... now it's hidden
  10.     viewModel.shouldShowMessage(true); // ... now it's visible again
  11. </script>

参数

  • 主参数

    • 当参数设置为一个假值（例如：布尔值 false， 数字值 0， 或者 null， 或者 undefined） ,该绑定将设置该元素的 yourElement.style.display 值为 none，让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。

When the parameter resolves to a false-like value (e.g., the boolean value false, or the numeric value 0, or null, or undefined), the binding sets yourElement.style.display to none, causing it to be hidden. This takes priority over any display style you’ve defined using CSS.

  • 当参数设置为一个 真值 时（例如：布尔值 true，或者非 null 的对象或者数组） ,该绑定会删除该元素的 yourElement.style.display 值，让元素可见。然后你在CSS里自定义的display样式将会自动生效。

When the parameter resolves to a true-like value (e.g., the boolean value true, or a non-null object or array), the binding removes the yourElement.style.display value, causing it to become visible.

请注意,你配置的任何CSS样式将被应用 （所以像这样的CSS将被正常绑定display:table-row）。

Note that any display style you’ve configured using CSS will then apply (so CSS rules like display:table-row work fine in conjunction with this binding).

如果参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，如果不是，那元素的visible状态将只设置一次并且以后不在更新。

If this parameter is an observable value, the binding will update the element’s visibility whenever the value changes. If the parameter isn’t observable, it will only set the element’s visibility once and will not update it again later.

  • 其它参数

    • 无

注：使用函数或者表达式来控制元素的可见性

你也可以使用JavaScript函数或者表达式作为参数。这样的话，函数或者表达式的结果将决定是否显示/隐藏这个元素。

You can also use a JavaScript function or arbitrary JavaScript expression as the parameter value. If you do, KO will run your function/evaluate your expression, and use the result to determine whether to hide the element.

例如：

  1. <div data-bind="visible: myValues().length > 0">
  2.     You will see this message only when 'myValues' has at least one member.
  3. </div>
  5. <script type="text/javascript">
  6.     var viewModel = {
  7.         myValues: ko.observableArray([]) // Initially empty, so message hidden
  8.     };
  9.     viewModel.myValues.push("some value"); // Now visible
  10. </script>

依赖性

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

(c) knockoutjs.com