Knockout-了解Observable与computed
KO是什么?
KO不是万能的,它的出现主要是为了方便的解决下面的问题:
- UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态、样式等属性?
- UI元素之间关系比较紧密,比如操作一个元素,需要改变另外一个元素的状态?
- DOM元素与Js对象之间的数据同步?
- 前端javascript代码组织不理想?用户输入数据校验、DOM操作、后台交互…,交织在一起?
基础概念一:viewModel
- 负责处理UI事件的响应,响应用户操作。
- 负责保存领域模型在前端的变体Model’,比如:Student模型,在UI元素与Model之间同步数据(用户修改input-->ko修改model,反之亦然)
- 在需要的时候,可以使用Helper方法轻松地从viewModel中剥离出需要传递给Server的数据,通过ajax方式与后台交互。
- 负责接收Server端发送过来的数据(可能是Ajax请求),更新模型数据,同时更新UI展现。
基础概念二:Observable与computed
纵观KO的所有应用场景,基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下:
- Observable(监控属性):监控自身属性的变化,向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。
- Computed(依赖属性):在早期版本中叫做dependentObservable,它通常依赖于其他的Observable,通过计算得出自己的数据。当依赖项改变的时候,computed属性会接到通知,然后同步更新自身
*这里提2点:
- 虽然本文称之为“属性”,但是本质上他们是js的function对象,所以访问的时候需要加()号
- 默认情况下Computed的同步发生在任意的Observable变化的时候,可是某些情况下我们可能不希望它更新的如此频繁,比如用户正在输入的过程中。KO有其他办法来延迟更新,在本系列后面会有专门文章介绍。
本章的重点就是讲解这2个基本属性的用法,在后面的“实例讲解”中会详细说明。
如何激活KO绑定
KO中,绑定是需要激活的,可以理解为把viewModel的数据与Html文档的DOM元素进行分析和关联。
通常是在页面元素、viewModel数据加载完毕之后,就可以激活绑定了。当然你可以在任何时候你想进行绑定的时候来激活。
只需要下面的代码:
var model = new AppViewModel();//实例化一个viewModel
ko.applyBindings(model); //绑定到整个页面
这样KO会在整个Body中寻找需要进行绑定的元素,与viewModel进行绑定。当然你也可以指定绑定的根节点,这样的好处:
- 可以缩小KO查找绑定的范围(毕竟不是整个页面都需要进行binding)
- 可以同时使用多个viewModel,分别负责不同区域的绑定(是不是你想要的?haha…)
很简单,加一个参数即可:
var model = new AppViewModel();
ko.applyBindings(model, document.getElementById("Demo1")); //Demo1可能是一个Div
实例讲解:Observable
基本语法
1、定义
var myViewModel = {
personName: ko.observable('Bob'),//定义叫做personName的监控属性
personAge: ko.observable(123)//定义叫做personAge的监控属性
};
2、读取
var a=myViewModel.personName();//a为'Bob'
3、写入、连续写入(链式调用)
myViewModel.personName('Mary').personAge(50);//同时修改了2个属性值
4、订阅属性修改事件
myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
}); myViewModel.personName('换个名字');//这时候会弹出alert
Knockout-了解Observable与computed的更多相关文章
- Knockout 新版应用开发教程之Observable与computed
KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...
- Knockout 新版应用开发教程之Computed Observables
Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...
- 翻译:Knockout 快速上手 - 4: 你需要知道的顶级特性
Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...
- 翻译:Knockout 快速上手 - 3: knockoutJS 快速上手
许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览 在创建我们的应用之前,我们需要一个公司,来理解应 ...
- 【Knockout】二、监控属性Observables
MVVM和viewModel Knockout是建立在以下三大核心功能之上的: 监控属性和依赖跟踪(Observables and dependency tracking) 声明式绑定(Declara ...
- Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的
初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中.它其实很简单.跟踪算法是这样的: 无论何时你定义了一个computed observable,K ...
- Knockout 可扩展性
你需要知道的顶级特性 Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何 ...
- (一)Knockout 计算属性
1 Computed 首先,创建一个view model如下: <body> <p>The fullname is: <span data-bind="text ...
- 翻译:Knockout 快速上手 - 5: 你需要知道的顶级特性 续
Utilities Knockout 提供了许多可以你开发中使用的工具,你可以在 ko.utils 命名空间中找到它们,我最喜欢的工具如下所示: extend: 这个方法将两个对象合并在一起,调用这个 ...
随机推荐
- ping 中的“TTL"是什么意思
简单来说就是表示一个数据包在网络中可以跳跃的结点数据,当该数据为零时本数据包将被抛弃 详细解释看以下引用: TTL (although named as "time" to liv ...
- CodeForces-245H:Queries for Number of Palindromes(3-14:区间DP||回文串)
Times:5000ms: Memory limit:262144 kB 给定字符串S(|S|<=5000),下标由1开始.然后Q个问题(Q<=1e6),对于每个问题,给定L,R,回答区间 ...
- ASP.NET Core:WebAppCoreAngular
ylbtech-ASP.NET Core:WebAppCoreAngular 1.返回顶部 1. 2. 3. 4. 5. 6. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 ...
- Code-NFine:NFine介绍
ylbtech-Code-NFine:NFine介绍 1. NFine平台介绍返回顶部 1. 使用时请务必保留来源,请勿用于违反我国法律的web平台.如诈骗等非法平台网站.版权最终解释权归<NF ...
- 【旧文章搬运】Windows句柄表分配算法分析(实验部分)
原文发表于百度空间,2009-03-31========================================================================== 理论结合实 ...
- 一个不当使用fclose引发的异常
最近服务器上一个后台传输文件的服务,经常会报出异常来,只能强行终止并重启. 昨天刚好有空,现场抓了一下dump,再把程序扔到IDA里看了一下,很快就找出原因了,原来是调用fclose时出错的. 使用C ...
- A - Mike and Fax
Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Description While ...
- (4)ASP.NET Core 中间件
1.前言 整个HTTP Request请求跟HTTP Response返回结果之间的处理流程是一个请求管道(request pipeline).而中间件(middleware)则是一种装配到请求管道以 ...
- hdoj1728【搜索的两种写法】
以前的一道题目,现在拿到总觉得是DFS,然后T掉就没什么想法了,很狗的看了以前的写法(以前还是看题解的AC的),是BFS,每次都要转弯,但是之前你的达到一种他走到了死路,所以才是不得不转弯,写法也是非 ...
- python 标准库大全
python 标准库 文本 string:通用字符串操作 re:正则表达式操作 difflib:差异计算工具 textwrap:文本填充 unicodedata:Unicode字符数据库 string ...