对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)的更多相关文章

  1. Knockout v3.4.0 中文版教程-10-绑定-控制文本内容和外观-visible绑定

    4.绑定 1. 控制文本内容和外观 1. visible绑定 目的 visible绑定可以根据你传入绑定的值控制关联的DOM元素显示或隐藏. 例子 <div data-bind="vi ...

  2. Knockout与Require框架同时使用时的visible绑定的问题,造成的影响,以及解决的方法。

    Knockout 可以将 visible 绑定到DOM 元素上,使得该元素的hidden 或visible 状态取决于绑定的值. 查看以下knockout的描述,http://knockoutjs.c ...

  3. Knockout 新版应用开发教程之"visible"绑定

    "visible" 绑定 用途 DOM元素的显示或者隐藏是根据绑定的值来的,前提是将visible绑定给该元素 例子 <div data-bind="visible ...

  4. Visible 绑定

    目的 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 <script src="knockout.js"></script><div da ...

  5. Knockout.Js官网学习(visible绑定)

    前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shou ...

  6. 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    [源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...

  7. 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...

  8. Knockout.js Visible绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  9. WPF:在XmlDataProvider上使用主-从绑定(Master-Detail Binding)

    原文 http://www.cnblogs.com/mgen/archive/2011/06/19/2084553.html 示例程序: 如上程序截图,一目了然典型的主从模式绑定应用,如果里面的数据不 ...

随机推荐

  1. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  2. IOS常遇问题个人收藏网址指南

    代码适配Masonry使用的详细介绍: http://blog.csdn.net/majiakun1/article/details/51160339 Masonry使用注意篇: http://www ...

  3. 系统自动生成ID(比UUID.radom().tostring()要好看)

    public class test1 { public static void main(String[] args) { char[] para = {'A','B','C','D','E','F' ...

  4. cocos坐标系及坐标转换

    cocos2dx的坐标系是以左下角为(0,0)点, 向右上为正 世界坐标系:相对于屏幕位置的坐标表示 节点坐标系:相对于父节点的坐标表示 可以相互转换: /** * 将世界坐标转换成节点坐标,忽略锚点 ...

  5. NSRange:NSMakeRange

    NSRange:NSMakeRange(6, cardNo.length - 10) [cardNo stringByReplacingCharactersInRange:NSMakeRange(6, ...

  6. Maven手动增加依赖jar到本地Maven仓库中

    Apache Maven是一个项目管理及自动构建工具,有APache软件基金会提供.我们只要配置成功后就可以通过配置pom.xml添加所需依赖的jar包和类库,因为这些类库已经在我们配置的Maven仓 ...

  7. 6. Shell 流程控制

    1. 条件选择流程 1.1 if #!/bin/bash # if 格式 #if condition #then # command1 # command2 # ... # commandN #fi ...

  8. NIC Bonding: 2 nic port as 1 interface

    The following is concluded from here. Consider we have 2 interfaces: eth0 & eth1 bond the two in ...

  9. 【ORACLE】“System.Exception: System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本。”解决办法

    我的电脑是win10.64位.问题如题,在网上找了很多办法都没搞好,如下: 1.给oracle目录设置“Authenticated Users”用户的“读取/写入”权限 2.IIS网站物理路径凭据添加 ...

  10. hadoop参数配置

    Hadoop参数汇总 linux参数 JVM参数 Hadoop参数大全 core-default.xml hdfs-default.xml yarn-default.xml Hadoop参数汇总 @( ...