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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
JS二分查找算法详解
Nov 01 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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代码
2007/03/08 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python读取word文档的方法
2015/05/09 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python I/O与进程的详细讲解
2019/03/08 Python
由面试题加深对Django的认识理解
2019/07/19 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Django操作session 的方法
2020/03/09 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
教师自我评价范例
2013/09/24 职场文书
服装厂厂长职责
2013/12/16 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python