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 相关文章推荐
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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缓冲 output_buffering的使用详解
2013/06/13 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python 求数组局部最大值的实例
2019/11/26 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
SQL中where和having的区别
2012/06/17 面试题
岗位职责的含义
2013/11/17 职场文书
运动会邀请函范文
2014/01/31 职场文书
安卓程序员求职信
2014/02/28 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
申论倡议书范文
2014/05/13 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Go语言grpc和protobuf
2022/04/13 Golang