Visible 绑定

目的

Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

<script src="knockout.js"></script>
<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<div data-bind="visible: shouldShowMessage1"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<script>
var viewModel = {
shouldShowMessage:false,
shouldShowMessage1:true
};
ko.applyBindings(viewModel);
</script>

或者 

<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<div data-bind="visible: shouldShowMessage1"> You will see this message only when "shouldShowMessage" holds a true value.</div>
<script>
var viewModel = {
shouldShowMessage:ko.observable(false),
shouldShowMessage1:ko.observable(true)
};
ko.applyBindings(viewModel);
</script>

或者这样写

<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将会运行你的函数或者表达式，返回的结果来控制元素显示或者隐藏。

例如：

1 2 3 4 5 6 7 8 9

<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核心库之外，无依赖关系。