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题目,重写函数让其无限相加
Feb 15 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
小程序实现搜索框功能
Mar 26 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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 magic quotes的详解
2013/06/17 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
对numpy中数组元素的统一赋值实例
2018/04/04 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python文件写入write()的操作
2019/05/14 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
企划主管岗位职责
2013/12/12 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
实习生矿工检讨书
2014/10/13 职场文书
党员评议自我评价
2015/03/03 职场文书
民事辩护词范文
2015/05/21 职场文书
公司欠款证明
2015/06/24 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
python​格式化字符串
2022/04/20 Python