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 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
JS中Attr的用法详解
Oct 09 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
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新手上路(七)
2006/10/09 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python3.7.0的安装步骤
2018/08/27 Python
python自动化生成IOS的图标
2018/11/13 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
python同时遍历两个list用法说明
2020/05/02 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Python如何定义一个函数
2015/09/01 面试题
自荐信的两点禁忌
2013/10/30 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript