Knockout.js(三):计算属性(Computed Observable)
在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)的更多相关文章
- Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js:计算属性
ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...
- 计算属性 computed
计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- 【CC2530入门教程-02】CC2530的通用I/O端口输入和输出控制
第2课 CC2530的通用I/O端口输入和输出控制 小蜜蜂科教 / 广东职业技术学院 欧浩源 [通用I/O端口视频教程:https://v.qq.com/x/page/x0793aol7us.ht ...
- jQuery取值的一些奇奇怪怪的操作
语法解释:1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发2. var ch ...
- bzoj 2733 平衡树启发式合并
首先对于一个连通块中,询问我们可以直接用平衡树来求出排名,那么我们可以用并查集来维护各个块中的连通情况,对于合并两个平衡树,我们可以暴力的将size小的平衡树中的所有节点删掉,然后加入大的平衡树中,因 ...
- Chrome 浏览器 autocomplete off无效
在表单填写时突然发现autocomplete 失效了 网上搜索后得出大概意思是在某些情况下确实无效[捂脸] 解决方案 大致原因是浏览器默认为type为password的input标签自动填充密码 这样 ...
- perl6中的替换
use v6; =begin pod perl6 中的替换用S/// S有几个可选参数: :g —(长形式::global)全局匹配:替换掉所有的出现 :i —不区分大小写的匹配 :ii —(长形式: ...
- python开发第二十六天CMDB
概要: 1.采集资产 2.API 一.资产采集 1.采集方式的配置 2.插件的定制 3.测试模式 4.错误日志(必须是行级的详细错误信息) 5.汇报数据-->遵循资产的唯一性 (1)只针对物理机 ...
- gcc中的内嵌汇编语言(Intel i386平台)
[转]http://bbs.chinaunix.net/thread-2149855-1-1.html 一.声明 虽然Linux的核心代码大部分是用C语言编写的,但是不可避免的其中还是有一部分是用汇 ...
- winscp上传出现时间戳提示错误
文件ngx_http_access_module.c上传成功,但是在设置权限和/或时间戳时发生错误.具体内容上图: 我们可以选择 ‘中止’,文件是可以上传成功的,就是每次都会提示这个信 ...
- mui框架 页面无法滚动解决方法
只需要初始化一下就可以了 mui.init(); 加下面这段代码即可: (function($){ $(".mui-scroll-wrapper").scroll({ //boun ...
- leetcode 之Rotate Image(8)
这题需要搞清楚矩阵元素的位置关系,尤其是副对角线元素,沿着副对角线元素 void rotateImage(vector<vector<int>> &matrix) { ...