创建示例
创建一个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