"visible" 绑定(可见性绑定)

• ko内置的基础绑定之一 。
• 用于控制DOM元素的可见性，直接影响元素的display样式属性。
• 如果与observable或者computed属性绑定，则会产生双向绑定效果。

例子

<div data-bind="visible: shouldShowMessage">
    当"shouldShowMessage" 变量的值为true的时候.你能看到这段内容，
</div>
 
<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // 初始化为true
    };
    viewModel.shouldShowMessage(false); // 修改为false,Div变不可见
    viewModel.shouldShowMessage(true); // 为true则Div可见
    ko.applyBindings(viewModel);
</script>

参数

• 主参数

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

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

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

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

• 其它参数

  • 无

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

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

例如：

<div data-bind="visible: myValues().length > 0">
    当 'myValues'至少有一个元素时，你能看到这段内容
</div>
 
<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // 初始化个空数组，此时div不可见
    };
    viewModel.myValues.push("some value"); // 添加元素，div可见
    ko.applyBindings(viewModel);
</script>

依赖性

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