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引用对象的方法代码
Aug 13 Javascript
javascript eval函数深入认识
Feb 21 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
jqgrid 简单学习笔记
May 03 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
浅析PHP Socket技术
2013/08/02 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python编程之多态用法实例详解
2015/05/19 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
基于Python绘制个人足迹地图
2020/06/01 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
中专生的个人自我评价
2013/12/11 职场文书
益达广告词
2014/03/14 职场文书
小学校长汇报材料
2014/08/20 职场文书
村安全生产责任书
2014/08/25 职场文书
2014年化验室工作总结
2014/11/21 职场文书
创业计划书之面包店
2019/09/12 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
关于使用Redisson订阅数问题
2022/01/18 Redis
python垃圾回收机制原理分析
2022/04/13 Python