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库