标签：
下面介绍下ko.applyBindings操作时使用的是什么样的参数：
第一个参数是你想激活KO时用于声明式绑定的View Model对象；
第二个参数（可选），你可以使用第二个参数来设置要使用data-bind属性的HTML元素或容器。例如：
ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))
它限制了只有ID为someElementId的元素才能激活使用KO功能，当你在一个页面中声明了多个View Model来绑定不同的界面区域时，这样限制是很有好处的。
下面是一个创建最基础的View-Model并绑定到ko的例子。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(document_ready); function document_ready() { //创建View-Model var myViewModel = { userName: "Kitty" } //ko绑定View-Model对象 ko.applyBindings(myViewModel); } </script> </head> <body> <p>Hello:<span data-bind="text: userName"></span></p> </body> </html>
KO最重要的一个属性就是当View Model发生变化时能够自动的更新UI界面。KO是如何能够知道你的View Model已经发生改变了呢？答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript 对象，能够通知用户它的改变以及自动检测依赖关系。
var myViewModel = { personName: ko.observable(‘Bob‘), personAge: ko.observable(123) };
你根本不需要对View进行更改，所有的data-bind语法依然正常工作。所不同的是，现在它能够自动检测变化，并通知它自动更新界面（View）。
并不是所有的浏览器都支持JavaScript的getters and setters (比如IE)，所以，为了兼容，ko.observable监控的对象都是方法。
1、读取当前监控的属性值，只需要直接调用observable（不需要参数），在这个例子当中，调用myViewModel.personName()将会返回‘Bob‘，调用myViewModel.personAge() 将会返回‘123‘
2、写一个新值到监控属性上，调用observable方法，将要写的值作为一个参数传入即可。例如，调用myViewModel.personName(‘Mary‘) 将会把名称改变成 ‘Mary‘。
3、一次性改变Model对象监控的多个属性值，你可以使用链式方法。例如：myViewModel.personName(‘Mary‘).personAge(50) 将会把名称改变成‘Mary‘将年龄设置为 50.
监控属性最重要的一点就是可以随时监控，也就是说，其他代码可以告诉它哪些是需要通知发生变化的。这就是为什么KO会有如此多的内置绑定语法。所以，当你在页面中编写data-bind="text: personName"，text 会绑定注册到自身，当personName发生变化时，它能够立即得到通知。
当你通过调用 myViewModel.personName(‘Mary‘) 将名称的值改变成为‘Mary‘时，text绑定会自动更新新值到其对应的DOM对象元素上,这就是为什么改变数据模型能够自动刷新View页面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(document_ready); function document_ready() { //创建View-Model var myViewModel = { personName: ko.observable(‘Bob‘), personAge: ko.observable(1) }; function start(){ setInterval(function(){ myViewModel.personAge(myViewModel.personAge()+1); console.log(myViewModel.personAge()); }, 1000); }; //ko绑定View-Model对象 ko.applyBindings(myViewModel); start(); } </script> </head> <body> <p>Hello:<span data-bind="text: personName"></span></p> <p>personAge:<span data-bind="text: personAge"></span></p> </body> </html>
标签：
原文地址：http://www.cnblogs.com/jsncz/p/5340922.html
