Knockout 新版应用开发教程之Observable与computed
2013-07-13 10:18
183 查看
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 新版应用开发教程之Computed Observables
- Knockout 新版应用开发教程之Observable Arrays
- Knockout 新版应用开发教程之"visible"绑定
- Knockout 新版应用开发教程之创建view models与监控属性
- Knockout 新版应用开发教程之"text"绑定
- Knockout 新版应用开发教程之Computed Observables
- Knockout 新版应用开发教程之"visible"绑定
- Knockout 新版应用开发教程之"text"绑定
- iOS应用开发教程[中字]—斯坦福2011新版
- Yii Framework 开发教程(1) 第一个应用Hello World
- Android简明开发教程二十三:发布应用
- 微信公众帐号开发教程第17篇-应用实例之智能翻译
- 10天学会跨平台移动应用开发之AppCan视频教程
- Android游戏开发教程之八:SurfaceView类的应用实例
- Vaadin Web应用开发教程(48): SQLContainer-编辑
- 微信公众平台开发教程第19篇-应用实例之人脸检测
- [043] 微信公众平台开发教程第19篇-应用实例之人脸检测
- iOS开发-进阶:企业应用发布教程
- QtQuick桌面应用开发指导 1)关于教程 2)原型和设计 3)实现UI和功能_A
- [041] 微信公众帐号开发教程第17篇-应用实例之智能翻译 .