Knockout中VIEW MODEL对象介绍

PHPABC JavaScript 633 次浏览 没有评论

创建示例

创建一个VM(View Model:视图模型对象)非常简单,只要声明一个JavaScript对象就可以了,举例如下:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>knoctoutJS测试</title>     <script type="text/javascript" src="js/knockout-3.3.0.debug.js"></script> </head> <body>      The name is <span data-bind="text:personName"></span>     <script type="text/javascript">         var myViewModel = {             personName: 'Bob',             personAge : 123         };          ko.applyBindings(myViewModel,document.body);     </script> </body> </html> 

激活Knockout

为了激活Knockout让VM正常工作,你要通过下面的方式来驱动。

ko.applyBindings(myViewModel); 

ko.applyBindings这个方法接受两个参数,分别如下

  • 第一个参数指明你需要哪个view model,这个view model对象将作用在你绑定在视图上声明式绑定上。
  • 第二个参数是可选的,指明你声明式绑定(比如data-bind)上DOM节点搜索的范围。

双向绑定之Observables(监控属性)

现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects,能够通知订阅者它的改变以及自动探测到相关的依赖。

例如:将上述例子的view model改成如下代码:

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

你根本不需要修改view – 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。

监控属性(observables)的读和写

  • 读取监控属性(observable)的值,只需要直接调用监控属性(observable)(不需要参数),例如myViewModel.personName() 将返回’Bob’, myViewModel.personAge() 将返回 123。

  • 写一个新值到监控属性(observable)上,调用这个observable属性并当新值作为参数。例如:调用 myViewModel.personName(‘Mary’) 将更新name值为’Mary’。

  • 给一个model对象的多个属性写入新值,你可以使用链式语法。例如: myViewModel.personName(‘Mary’).personAge(50) 将会将name更新为 ‘Mary’ 并且 将age更新为 50.

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

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

控属性(Observables)的显式订阅

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

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

subscribe函数接受三个参数,其介绍分别如下:
callback当通知送达时,要执行的回调函数
target(可选参数)回调函数中this指向的引用
event(可选参数,默认是change事件)触发通知的事件类型

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

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

如果你想observable(控属性) 在改变之前就发出事件通知的话,你可以订阅beforeChange事件来达到目的:

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

参考连接

部分内容来自:http://www.cnblogs.com/TomXu/archive/2011/11/22/2256820.html
原文链接:http://knockoutjs.com/documentation/observables.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go