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之Ajax运用 学习运用篇
Sep 26 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
使用php清除bom示例
2014/03/03 PHP
PHP常用处理静态操作类
2015/04/03 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python使用pil生成图片验证码的方法
2015/05/08 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
python抽取指定url页面的title方法
2018/05/11 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python通过文本和图片生成词云图
2020/05/21 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
python字典的元素访问实例详解
2021/07/21 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS