在Knockout2.0之前,计算属性被称之为依赖属性,在2.0版本中,ko.dependentObservable重命名为ko.computed,因为它在读、解释和类型上更简单。在实际使用中,ko.dependentObservable和ko.computed是等价的。

  如果有两个监控属性firstName和lastName,想显示全名,就可以使用计算属性,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变,他们就会跟着改变。

var myViewModel = {
firstName:ko.observable('lady'),
lastName:ko.observable('Gaga')
};

  添加一个计算属性来返回全名

myViewModel.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
},myViewModel);

  并且绑定到View视图界面上的元素

The fullname is <span data-bind="text: fullName"></span>

  不管是firstName还是lastName改变,全名fullName都会自动更新

  效果图:

  

  可写的计算属性

  计算属性是通过计算其他监控属性而得到的一个值。所以,计算属性一般都是只读的。实际上只需要提供一个回调函数就能实现写入功能,然后可以把这个可写的计算属性当成一个普通的监控属性来使用,通过自定义的逻辑来实现它的读和写。

var myViewModel = {
firstName:ko.observable('lady'),
lastName:ko.observable('Gaga')
};

  对fullName的计算属性进行调整

myViewModel.fullName = ko.computed({
read:function(){
return this.firstName() + " " + this.lastName();
},
write:function(value){
var lastSpacePos = value.lastIndexOf(" ");
if(lastSpacePos>0){
this.firstName(value.substring(0,lastSpacePos));
this.lastName(value.substring(lastSpacePos + 1));
}
},
owner:myViewModel
});

  ♦ read(必选):一个用来执行取得依赖监控属性当前值的函数

  ♦ write(可选):如果声明将是你的依赖属性可写

  ♦ owner(可选):如果声明,它就是KO调用read或write的回调函数时用到的this

  在这个例子上,write回调事件来处理用户输入的值将其分解成“firstName”和“lastName”两个部分,并将这些值返回到底层监控属性上。可以将view model绑定到DOM元素上。

<p>First name:<span data-bind="text:firstName"></span></p>
<p>Last name: <span data-bind="text: lastName"></span></p>
<p>Full name: <input data-bind="value: fullName"/></p>

  效果图:

  

  验证用户输入

  在上面的ViewModel中添加两个个属性

var myViewModel = {
firstName:ko.observable('lady'),
lastName:ko.observable('Gaga'),
age:ko.observable(30),
ageWasValid:ko.observable(true)
};

  添加一个计算属性

myViewModel.ageValue = ko.computed({
read:myViewModel.age,
write:function(value){
if(isNaN(value)){
this.ageWasValid(false);
}else{
this.ageWasValid(true);
this.age(value);
}
},
owner:myViewModel
});

  进行绑定View视图界面元素

<p>Enter a age:<input data-bind="value: ageValue"/></p>
<font data-bind="visible: !ageWasValid()" color="red">That's not a number!</font>

  效果图:

  

  

  依赖跟踪的原理

  1.声明一个依赖属性时,KO会立即调用求值算法得到其初始值;

  2.计算函数运行的时候,KO会把监控属性通过计算得到的值都记录在一个Log中;

  3.计算结束的时候,KO会订阅能够访问的监控属性或依赖属性,订阅的回调函数是重新运行计算函数,循环整个过程,回到步骤1(并且注销不再使用的订阅);

  4.KO会通知所有的订阅者,依赖属性已经被设置了新值。

  所以说,KO并不仅仅是在第一次执行计算函数时检测你的依赖项,它每次都会检测。这意味着,你的依赖是可以动态的,你不需要定义依赖关系:在代码运行时会自动检测到。

Knockout.js(三):计算属性(Computed Observable)的更多相关文章

  1. Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  2. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  3. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  4. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  5. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. vue2.0中的watch和计算属性computed

    watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...

  7. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue.js:计算属性

    ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...

  9. 计算属性 computed

    计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...

  10. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

随机推荐

  1. 【CC2530入门教程-02】CC2530的通用I/O端口输入和输出控制

    第2课  CC2530的通用I/O端口输入和输出控制 小蜜蜂科教 / 广东职业技术学院  欧浩源 [通用I/O端口视频教程:https://v.qq.com/x/page/x0793aol7us.ht ...

  2. jQuery取值的一些奇奇怪怪的操作

    语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var ch ...

  3. bzoj 2733 平衡树启发式合并

    首先对于一个连通块中,询问我们可以直接用平衡树来求出排名,那么我们可以用并查集来维护各个块中的连通情况,对于合并两个平衡树,我们可以暴力的将size小的平衡树中的所有节点删掉,然后加入大的平衡树中,因 ...

  4. Chrome 浏览器 autocomplete off无效

    在表单填写时突然发现autocomplete 失效了 网上搜索后得出大概意思是在某些情况下确实无效[捂脸] 解决方案 大致原因是浏览器默认为type为password的input标签自动填充密码 这样 ...

  5. perl6中的替换

    use v6; =begin pod perl6 中的替换用S/// S有几个可选参数: :g —(长形式::global)全局匹配:替换掉所有的出现 :i —不区分大小写的匹配 :ii —(长形式: ...

  6. python开发第二十六天CMDB

    概要: 1.采集资产 2.API 一.资产采集 1.采集方式的配置 2.插件的定制 3.测试模式 4.错误日志(必须是行级的详细错误信息) 5.汇报数据-->遵循资产的唯一性 (1)只针对物理机 ...

  7. gcc中的内嵌汇编语言(Intel i386平台)

    [转]http://bbs.chinaunix.net/thread-2149855-1-1.html 一.声明  虽然Linux的核心代码大部分是用C语言编写的,但是不可避免的其中还是有一部分是用汇 ...

  8. winscp上传出现时间戳提示错误

    文件ngx_http_access_module.c上传成功,但是在设置权限和/或时间戳时发生错误.具体内容上图:         我们可以选择 ‘中止’,文件是可以上传成功的,就是每次都会提示这个信 ...

  9. mui框架 页面无法滚动解决方法

    只需要初始化一下就可以了 mui.init(); 加下面这段代码即可: (function($){ $(".mui-scroll-wrapper").scroll({ //boun ...

  10. leetcode 之Rotate Image(8)

    这题需要搞清楚矩阵元素的位置关系,尤其是副对角线元素,沿着副对角线元素 void rotateImage(vector<vector<int>> &matrix) { ...