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 相关文章推荐
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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分页代码详解
2008/03/27 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Vue 监听元素前后变化值实例
2020/07/29 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python pickle 和 shelve模块的用法
2013/09/16 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Java面试题及答案
2012/09/08 面试题
阿尔卡特(中国)的面试题目
2014/08/20 面试题
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年科室工作总结
2014/11/20 职场文书
电气工程师岗位职责
2015/02/12 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
话题作文之成长
2019/12/09 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis