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判断鼠标同时离开两个div的思路及代码
May 31 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 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安全配置 如何配置使其更安全
2011/12/16 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
js验证上传图片的方法
2015/05/12 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
python中快速进行多个字符替换的方法小结
2016/12/15 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
社会实践心得体会
2014/01/03 职场文书
民间借贷协议书范本
2014/10/01 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
工作失误检讨书
2015/01/26 职场文书
小孩不笨观后感
2015/06/03 职场文书
python如何获取网络数据
2021/04/11 Python