现在开始学习Knockout并且做个简单的例子。
Knockout是建立在以下三个核心功能之上的：
1、Observables and dependency tracking(属性监控与依赖跟踪)
2、Declarative bindings(声明式绑定)
3、Templating(模板机制)
创建一个ViewModel
var myViewModel = { personName: ko.observable(‘张三‘), personAge: ko.observable(12) };
将属性绑定到View
<div>
<span data-bind="text: personName"></span>
</div>
将ViewModel一般应用到View中
$(function() {
ko.applyBindings(myViewModel);
});
最后源码如下:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Knockout学习一</title> <script src="Scripts/knockout-3.0.0.js" type="text/javascript"></script> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> <div> <span data-bind="text: personName"></span> </div> </body> <script type="text/javascript"> var myViewModel = { personName: ko.observable(‘张三‘), personAge: ko.observable(12) }; $(function() { ko.applyBindings(myViewModel); }); </script> </html>
前端将会显示出张三，其中我们为属性设定了Observables属性，即属性监控，这样personName数据若有变化，则会自动更新到View中，实现了数据的双向绑定。
applyBindings也可以有两个参数:ko.applyBindings(myViewModel,
document.getElementById(‘someElementId‘))
后一个参数是可选的，表示一个标签的id,若设置了该参数，则表示myViewModel只作用于该标签内的View,通过该参数，可以使一个页面对应多个ViewModel。
简单的knockout例子就到这里。