Knockout 新版应用开发教程之"visible"绑定
2013-07-17 21:20
387 查看
"visible" 绑定
用途DOM元素的显示或者隐藏是根据绑定的值来的,前提是将visible绑定给该元素
例子
<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将会运行这个函数或者函数表达式,并且用这个返回的结果来处理元素的 可见性(显示与隐藏)。
例如
<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核心类库外,无依赖。
相关文章推荐
- Knockout 新版应用开发教程之"visible"绑定
- Knockout 新版应用开发教程之"text"绑定
- Knockout 新版应用开发教程之"text"绑定
- Knockout 新版应用开发教程之Computed Observables
- Knockout 新版应用开发教程之Observable与computed
- Knockout 新版应用开发教程之创建view models与监控属性
- Knockout 新版应用开发教程之Computed Observables
- Knockout 新版应用开发教程之Observable Arrays
- Knockout应用开发指南 第五章:创建自定义绑定
- Knockout应用开发指南 第三章:绑定语法(2)
- Kendo UI开发教程(18): Kendo MVVM 数据绑定(七) Invisible/Visible
- Knockout应用开发指南 第三章:绑定语法(3)
- Knockout应用开发指南 第三章:绑定语法(1)
- WPF4数据绑定应用之"创建具有多种显示效果的字串"
- Knockout应用开发指南 第四章:模板绑定
- Knockout应用开发指南 第三章:绑定语法(1)
- Knockout应用开发指南 第三章:绑定语法(2)
- 3.Android新版开发教程&笔记—Color&Typeface
- (转载)Electron & C++ 快速开发桌面Web "混合"应用
- Knockout应用开发指南 第三章:绑定语法(3)