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 浮动广告实现代码
Dec 25 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
js实现小时钟效果
Mar 25 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
企划经理的岗位职责
2013/11/17 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
语文教育专业求职信
2014/06/28 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
优秀班组申报材料
2014/12/25 职场文书
员工评语范文
2014/12/31 职场文书
爱国电影观后感
2015/06/19 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
七年级思品教学反思
2016/02/20 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL