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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
微信小程序实现点击页面出现文字
Sep 21 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个人网站架设连环讲(二)
2006/10/09 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
Python完全新手教程
2007/02/08 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python 实现微信防撤回功能
2019/04/29 Python
用python做游戏的细节详解
2019/06/25 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python模拟斗地主发牌
2020/04/22 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
个性发展自我评价
2014/02/11 职场文书
中学生运动会入场词
2014/02/12 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015年档案室工作总结
2015/05/23 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL