标签：
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核心库之外，无依赖关系。
标签：
原文地址：http://www.cnblogs.com/jinling/p/4722134.html
