visible绑定(The "visible" binding)
对visible进行绑定可以控制元素的显示和隐藏。
示例:
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
<script type="text/javascript">
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
</script>
参数说明:
- Main parameter
- 当参数值是False时(包括数字0,或者null, undefined),绑定的元素会被设置style.display为none,元素隐藏。这会覆盖你写的其他样式。
- 当参数是true时(包括true, 非空对象或数组),绑定的元素style.display会被移除,元素可见。
如果绑定到visible的属性是observable的,则当值改变时,元素的可见或者隐藏也会动态的更改。如果绑定上的值不是observable的,那么只在第一次绑定时会生效,后面更改这个值是不会影响到元素的可见与否的。
- Add parameters
- 无
注:使用函数和表达式控制元素的可见
也可以使用JS函数或者表达式来赋值,KO会根据函数或者表达式的值来动态的控制元素的显示和隐藏。
示例:
<div data-bind="visible: myValues().length > 0">
You will see this message only when 'myValues' has at least one member.
</div> <script type="text/javascript">
var viewModel = {
myValues: ko.observableArray([]) // Initially empty, so message hidden
};
viewModel.myValues.push("some value"); // Now visible
</script>
依赖
无,除了Knockout的核心库外。
visible绑定(The "visible" binding)的更多相关文章
- Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定
4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...
- Knockout与Require框架同时使用时的visible绑定的问题,造成的影响,以及解决的方法。
Knockout 可以将 visible 绑定到DOM 元素上,使得该元素的hidden 或visible 状态取决于绑定的值. 查看以下knockout的描述,http://knockoutjs.c ...
- Knockout 新版应用开发教程之"visible"绑定
"visible" 绑定 用途 DOM元素的显示或者隐藏是根据绑定的值来的,前提是将visible绑定给该元素 例子 <div data-bind="visible ...
- Visible 绑定
目的 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 <script src="knockout.js"></script><div da ...
- Knockout.Js官网学习(visible绑定)
前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shou ...
- 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
[源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...
- 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...
- Knockout.js Visible绑定
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- WPF:在XmlDataProvider上使用主-从绑定(Master-Detail Binding)
原文 http://www.cnblogs.com/mgen/archive/2011/06/19/2084553.html 示例程序: 如上程序截图,一目了然典型的主从模式绑定应用,如果里面的数据不 ...
随机推荐
- [Q]无矩形外框块参照图形的识别
该图纸的图框由块参照组成,其外侧图框不是矩形 使用默认设置无法正确识别,需要做以下修改:不勾选“块/外部参照”,勾选“块/外部参照边界”,勾选“制定块”并选择图框(块参照).
- JQ怎么跳出 each循环
return false;——跳出所有循环:相当于 javascript 中的 break 效果. return true;——跳出当前循环,进入下一个循环:相当于 javascript 中的 con ...
- 压测软件-Tsung.安装篇
author :James,jimingsong@vip.qq.com author :James,jimingsong@vip.qq.com since :2015-03-02 tsung介绍 ts ...
- 阿里云-对象储存OSS
最近 需要搞一个阿里云的文件上传 手机端主要做了图片上传 pod安装:pod 'AliyunOSSiOS', '~> 2.5.2' 主要就是需要四个参数:accessKey secretKey ...
- stm32 串口乱码的解决
版权声明:本文为博主原创文章. 前几天在中移物联网申请了一个迷你开发板,运行官方提供的程序,感觉板子是正常的.但是自己写的程序能够刷到板子上,但是串口却是乱码.官方和我的额程序都是用的库函数的方式写的 ...
- python 在mongo 中建立索引
import pymongo mongo = pymongo.Connection('localhost') collection = mongo['database']['user'] collec ...
- 【HELLO WAKA】WAKA iOS客户端 之一 APP分析篇
由于后续篇幅比较大,所以调整了内容结构. 全系列 [HELLO WAKA]WAKA iOS客户端 之一 APP分析篇 [HELLO WAKA]WAKA iOS客户端 之二 架构设计与实现篇 [HELL ...
- dropdown-toggle 的点击禁用
<div class="dropdown select-dropdown" id="choiceTagdiv"> <a class=" ...
- C# 泛型 Func<object, string, bool> filter
Func<object, string, bool>是泛型,你可以先把他看成一个普通类型,比如stringpublic class Func{ } // 自定义个普通类. Func fil ...
- CodeForces 702B Powers of Two
简单题. 开一个$map$记录一下每个数字出现了几次,那么读入的时候$f[a[i]]+1$. 计算$a[i]$做出的贡献的时候,先把$f[a[i]]-1$,然后再枚举$x$,答案加上$f[{2^x} ...