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 示例程序: 如上程序截图,一目了然典型的主从模式绑定应用,如果里面的数据不 ...
随机推荐
- C#基础--属性
定义一个Book类: namespace ConsoleTest { public class Book { private string _bookIsbn; private string _boo ...
- 【NOIP2013提高组】货车运输
货车运输 (truck.cpp/c/pas) [问题描述] A国有n座城市,编号从1到n,城市之间有m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有q辆货车在运输货物,司机们想知道每辆 ...
- 如何在无法直接用VS启动代码时如何调试代码
1. 普通情况下对进程Attach就可以调试. 2. 但是在一些情况下直接attach并无法调试,例如安装程序installer, 这样使用如下的调试方法即可调试安装程序. System.Diagno ...
- WinForm 基础
今天,我开始学习了WinForm.WinForm是客户端程序制作 - C/S,它必须在.NET Framework框架上运行 . 开始,我先学习了一下WinForm的常用窗体属性. 布局:AutoSc ...
- Thrift框架简介
功能:实现各个服务模块之间的跨语言.跨平台的通信,是RPC框架的一种,与dubbo类似. Thrift的应用原理: Thrift的部分功能相当于代码生成引擎,使用Thrift定义的语言编写*.Thri ...
- echarts样式修改
本人是查看如下链接: http://down.admin5.com/demo/code_pop/cs/dsj/doc/example/themeDesigner.html# 图示很简洁明了.
- CSS实现三角形图标的原理《转载》
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- lldb 命令
po [[UIWindow keyWindow] recursiveDescription]
- VMWARE player 如何让 win2012 guest os 支持HYPER-V
在 vm player 下安装了 win2012 r2, 但是启用 hyper-v的时候,提示不支持, 这时候要修改 Open the file Location for this Virtual M ...
- Android的JNI(NDK)使用备忘
1.在cygwin中给ndk-build工具设置环境变量,使其在任何目录下可以被调用:在cygwin的安装目录:C:\cygwin下找到etc目录,再打开其中的profile文件,再其path行增加n ...