首页 > 代码库 > knockout.js-创建视图模型

knockout.js-创建视图模型

监控属性(Observables)

knockout的三个核心特点:

  1.监控属性与依赖跟踪

  2.声明式绑定

  3.模板

本页,你将学习上述三个特性。但是在这之前,先了解一下MVVC模式,及 视图模型(view model)的概念。

MVVM和视图模型(View Models)

  MVVM : Model-View-View Model 是一种设计模式。它使很复杂的用户界面使用一个很简单的方式实现,它包括如下三部分:

  模型(model): 表示您的业务对象和逻辑(例如:银行账号汇款),这是和你的UI独立的部分。使用KO的时候,需要调用Ajax调用服务端方法读取或写入数据。

  视图模型(view model):UI层面的数据和操作的代码表示。例如,编辑一个列表,view model是一个list对象,并且会有add、remove项的操作。

注意,这个HTML界面是不同的,它只保存临时的前端数据(非持久化),view model只是纯粹的JS对象。

视图(view):KO里,视图可以理解就是HTML。(其他啰嗦的一堆没有翻译)。

 

使用KO创建view model,就是声明一个JS对象:

var myViewModel = {    personName: ‘Bob‘,    personAge: 123};

创建view:

The name is <span data-bind="text: personName"></span>

激活Knockout

data-bindHTML并不识别(它严格遵从HTML5语法, 虽然HTML4验证器提示有不可识别的属性但依然可用),由于浏览器不识别它是什么意思,需要在加入如下JS:

ko.applyBindings(myViewModel);

这个需要在文档一加载完成后就执行,可以写在HTML的最后,也可以使用JQuery的$。

这样做完之后,HTML等效于:

The name is <span>Bob</span>

applyBindings的参数说明:

  第一个参数:view model

  第二个参数:可选的,一个DOM对象。 如果指定这个参数,将会限定绑定行为只发生在这个DOM的范围及子元素内。

                   如:ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))。

                   好处是你可以在同一个页面声明多个view model,用来区分区域。

监控属性(Observables)

上述已经创建了简单的view model,以及把它显示在界面上。 但KO的核心是当view model改变时自动更新界面。这要怎么做呢?答案是使用observables。

例如,重写上面的例子:

view model:

var myViewModel = {    personName: ko.observable(‘Bob‘),    personAge: ko.observable(123)};

view 不用改。这时,当view model的值改变时,界面就会自动更改内容了。

读取、更改监控属性(observables)

  读取:myViewModel.personName() 返回 ‘Bob‘, and myViewModel.personAge() 返回 123.

  更改值:myViewModel.personName(‘Mary‘)

  一次改变多个值:myViewModel.personName(‘Mary‘).personAge(50)

监控属性(observables)的特征就是监控(observed),例如其它代码可以说我需要得到对象变化的通知,所以KO内部有很多内置的绑定语法。所以如果你的代码写成data-bind="text: personName", text绑定注册到自身,一旦personName的值改变,它就能得到通知。

当然调用myViewModel.personName(‘Mary‘)改变name的值,text绑定将自动更新这个新值到相应的DOM元素上。这就是如何将view model的改变传播到view上的。

 监控属性(Observables)的显式订阅(Explicitly subscribing to observables)

通常情况下,你不用手工订阅,所以新手可以忽略此小节。高级用户,如果你要注册自己的订阅到监控属性(observables),你可以调用它的subscribe 函数。例如:

myViewModel.personName.subscribe(function(newValue) {    alert("The person‘s new name is " + newValue);});

subscribe函数参数:

  callback 是一个funcation,当值改变时调用

  target(可选),是callback函数中的this值

  event(可选) 事件的名称,默认是change

这个subscribe 函数在内部很多地方都用到的。你也可以终止自己的订阅:首先得到你的订阅,然后调用这个对象的dispose函数,例如:

var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });// ...then later...subscription.dispose(); // I no longer want notifications

如果你要在值改变前得到通知,可以使用beforeChange这个event,例如:

myViewModel.personName.subscribe(function(oldValue) {    alert("The person‘s previous name is " + oldValue);}, null, "beforeChange");

注意:knockout不保证beforeChange和change一定成对出现。(后面的没看懂,大概意思是:)如果需要跟踪改变前的值,需要另外实现对值的跟踪。

强迫监控行为一直发生(Forcing observables to always notify subscribers)

一般情况下,当值改变时,KO会捕获到变化,并实施跟踪。但是当值更改前后一样时,这个通知是不会发出的,此时可以使用extender来确保这个通知一直发生,例如:

myViewModel.personName.extend({ notify: ‘always‘ });

延时 并且/或 抑制 监控属性改变后的通知(Delaying and/or suppressing change notifications)

一般情况下,一但值改变了,监控属性的通知就会马上触发。但是在某些情况下(如改变是重复的,或者处理值的改变的开销比较大),需要延后或者是限制通知产生。此时可以使用rateLimit这个扩展,例如:

// Ensure it notifies about changes no more than once per 50-millisecond periodmyViewModel.personName.extend({ rateLimit: 50 });

 

knockout.js-创建视图模型