if binding与visible binding类似。不同之处在于,包含visible binding的元素会在DOM中一直保存,并且该元素相应的data-bind属性会一直保持,visible binding只是利用CSS来触发元素的可见性。另一方面,if binding是物理地增加或删除包含它的元素,并且元素内的data-bind只有在判断语句为真时才生效。

下面是一个简单的if binding的例子:

js部分:

 var viewModel = {
displayMessage: ko.observable(false)
}; ko.applyBindings(viewModel);

html部分:

 <input type="checkbox" data-bind="checked: displayMessage" /> Display message
<div data-bind="if: displayMessage">The message.</div>

下面是另一个if binding的例子:

js部分:

 var viewModel = {
people: ko.observableArray([
{ name: "Kazusa", friends: [ "Chiaki", "Charlie" ] },
{ name: "Yuki", friends: null }
])
}; ko.applyBindings(viewModel);

html部分:

 <ul data-bind="foreach: people">
<li>
Name: <span data-bind="text: name"></span>
<div data-bind="if: friends">
Friends: <span data-bind="text: friends"></span>
</div>
</li>
</ul>

页面显示效果如下:

之前已经提到,在if binding中,包含if binding的元素会依照判断语句的真伪来决定自己是否出现在页面中,如果判断语句本身是一个observable,则每当该observable变化时,包含if binding的元素会被动态地添加或是移除,它自身其他的data-bind也会随之生效或是失效。

if binding也支持无容器的控制流语法,一个简单的示例如下:

 <ul>
<li>Item 1</li>
<!-- ko if: displayMessage -->
<li>Message</li>
<!-- /ko -->
</ul>

ifnot binding与if binding类似,只不过对判断语句结果的判断正好相反。这里有一个需要注意的地方是,假设viewModel中有一个属性displayMessage是一个observable,则data-bind= "ifnot: displayMessage"与data-bind= "if: !displayMessage()"的效果是一样的。在我们直接绑定observable的时候,我们是不需要添加括号的(个人理解是因为这里不涉及取或是更改observable的值,相应的判断由KO自己去做),而在对observable进行取反操作时,由于需要获取observable的值,我们在调用的时候是需要添加括号的。有的开发人员喜欢使用ifnot binding也是有这部分的原因。

KnockoutJs学习笔记(七)的更多相关文章

  1. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  2. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  3. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  5. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  6. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  7. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  8. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

  9. go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)

    目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...

  10. Java IO学习笔记七:多路复用从单线程到多线程

    作者:Grey 原文地址:Java IO学习笔记七:多路复用从单线程到多线程 在前面提到的多路复用的服务端代码中, 我们在处理读数据的同时,也处理了写事件: public void readHandl ...

随机推荐

  1. mybatis之注解方式实现

    * 使用mybatis举例,使用注解方式实现* 不需要针对UserMapperI接口去编写具体的实现类代码,这个具体的实现类由MyBatis帮我们动态构建出来,我们只需要直接拿来使用即可.* 1.导入 ...

  2. ES6学习笔记(三):与迭代相关的新东东

    Symbol 概念 Symbol:一种新的原始数据类型,表示独一无二的值. 注意:Symbol函数的参数只是表示对当前Symbol值的描述,因此相同参数的Symbol函数的返回值是不相等的. // 没 ...

  3. SSH协议详解

    简介 SSH只是一个协议,基于这个协议有不同的实现,这些实现中有开源,也有收费. 原理 普通网络通信一般是明文通信,数据容易被中间人拦截并且解析,而SSH协议则提供了基于内容加密服务. 流程: 第一种 ...

  4. clazz.isArray()

    boolean isArray() 判断类型是不是数组 Class clazz = int[].class; System.out.println(clazz.isArray());

  5. oracle存储过程批量插入测试数据

    前几天测试中债时,自定义资产有一级类型和二级类型,一级类型下有很多分类,每个分类下又有很多二级分类,而要做的是每种类型都要建立一个自定义资产,并做一笔交易,然后测试是否出值,于是写了一个存储过程批量插 ...

  6. 【BZOJ1444】[JSOI2009]有趣的游戏(高斯消元,AC自动机)

    [BZOJ1444][JSOI2009]有趣的游戏(高斯消元,AC自动机) 题面 BZOJ 题解 先把\(AC\)自动机构建出来,最好构成\(Trie\)图.然后这样子显然是在一个有向图中有一堆概率的 ...

  7. 以Java的视角来聊聊BIO、NIO与AIO的区别?

    转: 以Java的视角来聊聊BIO.NIO与AIO的区别? 飞丫玲丫 17-07-2623:10 题目:说一下BIO/AIO/NIO 有什么区别?及异步模式的用途和意义? BIO(Blocking I ...

  8. Eclipse配置Maven的一些问题

    问题1:连接私服 build项目非常缓慢 配置好本地的setting文件后,发现build非常缓慢,照显示的进度,可能要一天才会build后一个项目,同事指导解决方法如下: MyEclipse2017 ...

  9. SSM搭建Spring单元测试环境

    原文链接:https://jingyan.baidu.com/article/93f9803f5a97a4e0e46f55c8.html SSM搭建Spring单元测试环境

  10. jsoncpp的安装与使用示例

    安装: 生成静态库 生成静态库: 第一步:生成目标文件: g++ -g -Wall -c json_reader.cpp json_value.cpp json_writer.cpp -I. -I.. ...