"visible" 绑定
用途
DOM元素的显示或者隐藏是根据绑定的值来的，前提是将visible绑定给该元素
例子
|
2
3
4
5
6
7
8
9
10
11
12
13
|
<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
ko.applyBindings(viewModel);
</script> |
参数
主要参数
- 当这个参数是一个假值时（举例来说，布尔值的false , 数值0，或者null,或者undefined），绑定时候设置你的元素的style.display是none,从而使之隐藏起来。这个优先级要高于CSS中定义的
- 当这个参数是一个真值时（举例来说，布尔值是true,或者非空对象与数组），绑定时候移除你
display的值，从来显示出来
注意：在CSS中你能配置任何display的风格（所以CSS的规则，比如display:table-row 在绑定之后也能很好的处理）
如果参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，如果不是，那元素的visible状态将只设置一次并且以后不在更新。
- 附加参数：
- 无
注意：用函数或者函数表达式去控制元素的可见性
你也能用JavaScript函数或者任意的函数表达式作为一个参数值。
如果你这样做，KO将会运行这个函数或者函数表达式，并且用这个返回的结果来处理元素的 可见性（显示与隐藏）。
例如
|
2
3
4
5
6
7
8
9
10
11
12
|
<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
ko.applyBindings(viewModel);
</script> |
依赖：除KO核心类库外，无依赖。
本文转自艾伦 Aaron博客园博客，原文链接：http://www.cnblogs.com/aaronjs/p/3195611.html，如需转载请自行联系原作者