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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
input框中的name和id的区别
Nov 16 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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 CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
小程序实现投票进度条
2019/11/20 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
使用python实现省市三级菜单效果
2016/01/20 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
怎么样写好简历中的自我评价
2013/10/25 职场文书
中英文自我评价语句
2013/12/20 职场文书
高一数学教学反思
2014/02/07 职场文书
经典公益广告词
2014/03/13 职场文书
党员自我剖析材料
2014/08/31 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
销售合作意向书范本
2015/05/08 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
建党伟业的观后感
2015/06/01 职场文书
恰同学少年观后感
2015/06/08 职场文书
西游降魔篇观后感
2015/06/15 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
浅谈Redis缓冲区机制
2022/06/05 Redis