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 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
Node.js文件操作详解
Aug 16 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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导出oracle库的php代码
2009/04/20 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
javascript this用法小结
2008/12/19 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
JS数据类型判断的几种常用方法
2020/07/07 Javascript
python集合是否可变总结
2019/06/20 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
python db类用法说明
2020/07/07 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
如何获得EntityManager
2014/02/09 面试题
学术会议欢迎词
2014/01/09 职场文书
教师师德承诺书
2014/03/26 职场文书