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> 

参数

主参数

当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时,该绑定会设置yourElement.style.display为none,让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。

当参数设置为一个真值(例如bool型值true、不等于null、Object对象或数组)时,该绑定会去掉yourElement.style.display值,让元素显示。

注意,任何你在CSS中定义的样式会立即应用生效。

如果参数是一个observable值,visible绑定使得元素的visible状态随着参数值的变化而变化。如果参数不是observable值,visible绑定仅仅会设置元素visible状态一次,以后不会再更新。

其他参数

注:使用函数或表达式来控制元素显示隐藏

你可以选择使用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>  

依赖关系

除了Knockout核心库之外,无依赖关系。