KnockoutJs学习笔记(三)
之前的文章主要针对的是单一的observable(即便是observableArray也是一种observable),而文档Using computed observables则主要是针对ko.computed这一function,它能够将多个observable联系起来,无论这些observable中的哪个发生了变化,ko.computed也会发生相应的变化并将结果反应在UI中。
首先,创建一个view model如下:
function MyViewModel() {
this.firstName = ko.observable("Chiaki");
this.lastName = ko.observable("Izumi");
}
需要注意的是,这里创建的是一个view model的构造函数,而不是像前两篇文章一样直接创建的object,其中的区别有待研究。
我们可以在这个构造函数中添加一个computed observable,并激活bindings,js部分如下:
function MyViewModel() {
this.firstName = ko.observable("Chiaki");
this.lastName = ko.observable("Izumi");
this.fullName = ko.computed(function() {
return this.firstName()+ " " + this.lastName();
}, this);
} ko.applyBindings(new MyViewModel());
在html文件中添加p元素作为测试:
<p>The fullname is: <span data-bind="text: fullName"></span></p>
页面显示如下:
每当firstName或是lastName中至少一个变化的时候,就会调用一次ko.computed来生成fullName并反映在UI中。
从以上示例中也可以看到,ko.computed有两个参数,第一个是联系两个observable并生成fullName的函数,第二个是this。第二个参数指定了第一个参数中的this的值(这个看起来的确有些怪异,可以留作以后研究),按照文档中的说法,javascript中的函数在默认情况下并不是object的一部分,所以需要指定this的值。
也有一种通用的简化方式,即将this在构造函数一开始就赋给另一个变量,这样在之后需要用到this的部分即可以通过调用另一个变量来实现:
function MyViewModel() {
var self = this; self.firstName = ko.observable("Chiaki");
self.lastName = ko.observable("Izumi");
self.fullName = ko.computed(function() {
return self.firstName()+ " " + self.lastName();
});
}
个人分析,之所以能够通过这种方式来简化,跟javascript中的this机制有关,可能在javascript中每当遇到一个this的时候就分析当前的object到底是哪个,进而对this进行替代,但是进入到ko.computed函数里面之后,由于函数并不算是object的一部分,this的值也就不再是当前的object(MyViewModel),而变成了window,使用self以后就涉及到闭包的问题了,使得self的值并不会更改,这个可以留作以后研究。
如果computed observable知识基于一些observable的简单计算的话,使用pureComputed会比computed更好,如下:
self.fullName = ko.pureComputed(function() {
return self.firstName()+ " " + self.lastName();
})
有关pureComputed的部分留作之后研究。
我们也可以对computed或是pureComputed进行强制订阅,如下:
self.fullName = ko.pureComputed(function() {
return self.firstName()+ " " + self.lastName();
}).extend({notify: "always"});
注意到"."是在pureComputed这一function之后的。
同样的,可以通过调用extend方法中的rateLimit属性来指定响应的延时。
在某些时候,我们可能需要判定某个变量到底是不是computed observable,这时可以用到ko.isComputed来进行判断,类似的方法还包括isObservablem,isWritableObservable等,其中isObservable对于observables、observable arrays、computed observables均会返回true;isWritableObservable对于observables、observable arrays、writable computed observables均会返回true,这部分可以留作以后研究。
KnockoutJs学习笔记(三)的更多相关文章
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
- Java IO学习笔记三
Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...
- NumPy学习笔记 三 股票价格
NumPy学习笔记 三 股票价格 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.&l ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) indigo rplidar rviz slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
随机推荐
- google 变量命名规则简要记录
1.文件命名规则 好的文件名命名可以很清晰的看出这个文件将要承载的内容,Google给出的规则为:文件名要全部小写, 可以包含下划线 (_) 或连字符 (-). 按项目约定来, 例如:cmd_save ...
- MySQL数据库之auto_increment【转】
一.概述 在数据库应用中,我们经常需要用到自动递增的唯一编号来标识记录.在MySQL中,可通过数据列的auto_increment属性来自动生成.可在建表时可用“auto_increment=n”选项 ...
- python3+selenium入门09-键盘事件
Keys类提供了键盘上几乎所有按键的方法.通过send_keys()方法不仅可以用来模拟键盘输入,还可以用它来模拟键盘上的按键.包括组合键,比如Ctrl+a等 需要导入Keys类 from selen ...
- InstallShield 静默安装
可能先需要获取安装包参数,安装包参数获取/?或是/HELP InstallScrip工程 1. 在命令行窗口中使用 -R 参数(即record) 运行安装程序. 例如: Setup.exe -R or ...
- 空串、null串和isEmpty方法
空串 空串""是长度为0的字符串.可以调用以下代码检查字符串是否为空: if(str.length() == 0) 或 if(str.equals("")) 空 ...
- NOIP模拟赛10 题解
t3: 题意 给你一棵树,然后每次两种操作:1.给一个节点染色 : 2. 查询一个节点与任意已染色节点 lca 的权值的最大值 分析 考虑一个节点被染色后的影响:令它的所有祖先节点(包括自身)的所有除 ...
- html5 - Storage 本地存储
Storage的解释 http://www.w3school.com.cn/html5/html_5_webstorage.asp 简单的理解就是: Storage 有两种: 1.localStora ...
- (常用)xml-pickle-shevel-json模块
json,pickle模块 1. 什么是序列化 序列化指的是将内存中的数据类型转换成一种中间格式,该格式可以用来存到硬盘中或者基于网络传输 2. 为 ...
- python获取esxi的磁盘使用率信息
#!/usr/bin/python3 #coding:utf-8 #Author: ziming """ 只用于模拟开发功能测试 """ f ...
- python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用
python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用 redispy安装安装及简单使用:https://github.com/andymccurdy/r ...