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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
Web开发之JavaScript
Mar 29 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
python 调用HBase的简单实例
2016/12/18 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
工作检讨书500字
2014/10/19 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2015元旦节寄语
2014/12/08 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers