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获取div宽度的实现思路与代码
Jan 13 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP操作数组相关函数
2011/02/03 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php常用的url处理函数总结
2014/11/19 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python简单I/O操作示例
2019/03/18 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
教师个人自我鉴定
2014/02/08 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript