Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定

4.绑定

1. 控制文本内容和外观

1. visible 绑定

目的

visible 绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏。

例子

<div data-bind="visible: shouldShowMessage">

    You will see this message only when "shouldShowMessage" holds a true value.

</div>

<script type="text/javascript">

    var viewModel = {

        shouldShowMessage: ko.observable(true) // Message initially visible

    };

    viewModel.shouldShowMessage(false); // ... now it's hidden

    viewModel.shouldShowMessage(true); // ... now it's visible again

</script>

参数

• 主参数
  • 当参数被解析为false（比如参数为 false ，数字 0 ， null , undefind ），绑定会设置 yourElement.style.display 的值为 none ，使之隐藏。该优先级高于你通过css定义的样式。
  • 当参数被解析为true(比如 true ，非空对象或数组)，绑定会移除 yourElement.style.display 的值，这样就会变为可见
  • 注意，你用css规则配置的任何显示样式都会被应用（所以比如像 x { display:table-row } 这样的规则，绑定也能很好地一起工作）。
  • 如果参数是一个监控值，当值发生改变的时候，元素的可见性会更新。如果参数不是监控对象，它只会设置元素可见性一次，之后有改动不会更新样式。
• 额外参数
  • 无
    
    注意：使用函数或表达式控制元素可见性

你可以使用javascript函数或任何表达式作为参数值。如果这样，KO会运行函数或对表达式求值，然后由结果决定元素是否可见。

例子：

<div data-bind="visible: myValues().length > 0">

    You will see this message only when 'myValues' has at least one member.

</div>

<script type="text/javascript">

    var viewModel = {

        myValues: ko.observableArray([]) // Initially empty, so message hidden

    };

    viewModel.myValues.push("some value"); // Now visible

</script>

依赖

只有核心KO库