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 剧场版 你必须知道的javascript
May 27 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
平面设计求职信
2014/03/10 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
委托培训协议书
2014/11/17 职场文书
初中优秀学生评语
2014/12/29 职场文书
财务部岗位职责
2015/02/03 职场文书
教师病假条范文
2015/08/17 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
Python实现学生管理系统(面向对象版)
2021/06/24 Python