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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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数据类型之布尔型的介绍
2013/04/28 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
js 页面输出值
2008/11/30 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
extjs render 用法介绍
2013/09/11 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
js使用心得分享
2015/01/13 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JS常用算法实现代码
2016/11/14 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python黑魔法之编码转换
2016/01/25 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
一份Java笔试题
2012/02/21 面试题
经典c++面试题二
2015/08/14 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
好军嫂事迹材料
2014/01/15 职场文书
计划生育宣传标语
2014/06/21 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
软件测试专业推荐信
2014/09/18 职场文书
致青春观后感
2015/06/09 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL