Knockout visible绑定使用方法


Posted in Javascript onNovember 15, 2013

简单的绑定

首先还是先定义一个ViewModel

    var AppViewModel = {
        shouldShowMessage: ko.observable(true)  ///初始化的时候div是visible的     
    };    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    ko.applyBindings( AppViewModel);

并且通过ko.applyBindins进行激活Knockout。
然后定义一个UI界面元素

<div data-bind="visible:shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

运行之后此div在初始化的时候还是显示的可以,之后就被重新赋值为false,导致此div被隐藏掉了。
参数:
当参数设置为一个假值时(例如:布尔值false, 数字值0, 或者null, 或者undefined) ,该绑定将设置该元素的style.display值为none,让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。
当参数设置为一个真值时(例如:布尔值true,或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值,让元素可见。然后你在CSS里自定义的display样式将会自动生效。
如果参数是监控属性observable的,那元素的visible状态将根据参数值的变化而变化,如果不是,那元素的visible状态将只设置一次并且以后不在更新。
使用函数或者表达式来控制元素的可见性
你也可以使用JavaScript函数或者表达式作为参数。这样的话,函数或者表达式的结果将决定是否显示/隐藏这个元素。例如:
<script type="text/javascript">
    var AppViewModel = {
        shouldShowMessage: ko.observable(true),   ///初始化的时候div是visible的
        myValues: ko.observableArray([])         
    };    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    AppViewModel.myValues.push("some value");                   ///向myValues数组中 添加一个项
    ko.applyBindings( AppViewModel);
</script>

在ViewModel中添加了一个myValues的属性值
同时给myValues的数组添加了一个项
并且在页面UI中绑定了一个元素
<div data-bind="visible: myValues().length > 0">    
You will see this message only when 'myValues' has at least one member.
</div>

就这样当添加完"some value"元素之后,myValues().length>0 则结果为true
那么此div就会显示出来。
Javascript 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
js charAt的使用示例
Feb 18 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
Knockout数组(observable)使用详解示例
Nov 15 #Javascript
图片上传插件jquery.uploadify详解
Nov 15 #Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 #Javascript
Json和Jsonp理论实例代码详解
Nov 15 #Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
简洁Ajax函数处理(示例代码)
Nov 15 #Javascript
You might like
php对大文件进行读取操作的实现代码
2013/01/23 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS hashMap实例详解
2016/05/26 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
工作时间上网检讨书
2014/02/03 职场文书
业务内勤岗位职责
2014/04/30 职场文书
鲁冰花观后感
2015/06/10 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python