之前的文章主要针对的是单一的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学习笔记(三)的更多相关文章

  1. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  2. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

  3. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  4. java之jvm学习笔记三(Class文件检验器)

    java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...

  5. VSTO学习笔记(三) 开发Office 2010 64位COM加载项

    原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...

  6. Java IO学习笔记三

    Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...

  7. NumPy学习笔记 三 股票价格

    NumPy学习笔记 三 股票价格 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.&l ...

  8. Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam

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

  9. Learning ROS for Robotics Programming Second Edition学习笔记(三) indigo rplidar rviz slam

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

  10. Typescript 学习笔记三:函数

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

随机推荐

  1. 二、Java神经网络框架Neuroph的使用和架构分析

    一.使用Neuroph Studio构造感知机处理逻辑与 新建项目 接着,输入名字和地址,点击“完成” 在工程的神经网络文件下新建神经网络 准备训练数据 开始训练 误差展示 也可以测试神经元 或者输入 ...

  2. gprof使用介绍【转】

    转自:https://blog.csdn.net/linquidx/article/details/5916701 gprof 1.1      简介 gprof实际上只是一个用于读取profile结 ...

  3. Windows PowerShell 入門(10)-デバッグ編

    対象読者 Windows PowerShellでコマンドレット操作ができる方 何らかのプログラミング経験があればなお良い 必要環境 Windows PowerShell デバッグメッセージの出力 Po ...

  4. 使用thrift实现订阅服务和发布服务

    使用thrift实现订阅服务和发布服务 服务:订阅服务 market_subscriber 和 发布服务 market_publisher功能:market_subscriber 能够向 market ...

  5. 在VC中改变TAB顺序的方法

    用VC来写MFC程序的时候,多数情况下,会发现TAB顺序和预期的顺序不一致,那么这时就有必要重新调整TAB顺序, 来适应我们所写的程序. 调整TAB顺序的方法有两种: 1.在当前的界面或对话框下按“C ...

  6. 使用javascript调用com组件

    <html> <head> <title> 调用com组件的方法示例 </title> <script language="javasc ...

  7. 题解-USACO18DEC Sort It Out

    Problem 洛谷5156 题意概要:给定一个长为\(n\)的排列,可以选择一个集合\(S\)使这个集合内部元素排到自己在整个序列中应该在的位置(即对于集合\(S\)内的每一个元素\(i\),使其排 ...

  8. [1]字符串按中文符占3位进行指定长度剪切[2]Double类型截取指定长度(指定长度=整数位+小数位)

    /** 将中文字符串剪切为在当前db2(编码GBK)中所占用的长度*/ public String cutStringForDb2(String src,Integer size) { int len ...

  9. 清理messages提示-bash: /var/log/messages: Operation not permitted的处理

    报警提示系统盘容量不足了/var/log下查看messages日志已经很大了,所以就想着把messages清空一下,以此来释放空间.在删除的时候提示没有权限. 看了下日志,发现是大量的haproxy日 ...

  10. Linux root密码忘记了怎么办?

    一.找回root密码: 1. 开机出现 Booting Red Hat Enterprise Linux Client (…) in 3 seconds … 按任意键进入menu菜单: 2. 选择当前 ...