我们先来look一下ko实现原理mvvm模式，即模型－视图－视图模型。
mvvm一开始我觉得跟mvc模式的差不多，只是把controller换成viewmodel取代，换汤不换药，后来深入了解一下mvvm之后发现两者还是有区别的。比如以ko实现的mvvm模式而言，其核心是“绑定”即“数据的绑定”和“行为的绑定”。数据的绑定，就是将viewmodel定义的数据绑定到View中的html元素上，它支持双向和单向绑定，用户在界面上输入的数据可以被viewmodel捕获，而viewmodel对数据的更新可以自动反映在view，这样通过js定义ui处理逻辑的时候，就不需要需关注view(html元素)的细节，只需要对自身的数据进行操作即可。行为绑定就是事件注册，即view中html元素的事件（比如click事件）与viewmodel定义的方法进行绑定。如下图所示：
简单介绍一下ko，它是声明式绑定（data-bind）将DOM元素和模型数据(model data)关联在一起，UI界面会根据模型数据的改变自动更新，它可以在模型数据间建立隐式依赖关系链，它还能以模型数据函数为基础，快速生成复杂可嵌套的UI。它的优点是：
1双向绑定：view跟viewmodel可以相互更新数据。
2逻辑与UI分离：页面数据处理逻辑与html元素完全分离。
3维护简单：与其他js框架比只需要少量代码即可实现需求，维护量小。
下面简单列举一下ko使用的基本步骤：
1定义一个viewmodel
function ViewModel() {
var self=this;
self.firstName = ko.observable("Bert");
self.lastName =ko.observable("Bertington");
self.test=function(){
self. firstName=”test”;
}
}
使用observable方法赋值，可以实现UI页面数据根据viewmodel改变自动更新，viewmodel也会根据UI改变更新model中的数据。当如果是要传递数组时可以使用observableArray方法。比如：
self.myobservableArray =ko. observableArray ([{ name:"Bungle",type:"Bear" },{ name:"George",type: "Hippo" },{name: "Zippy", type:"Unknown"}]);
如果需要动态添加项，则myObservableArray.push("Some Value")，myObservableArray. unshift("Some Value") ,两者不同点是第一个删除数组末尾元素，第二个删除数组开头元素。
动态删除项：myObservableArray.pop();myObservableArray.shift();第一个删除数组末尾元素，第二个删除数组开头元素。
翻转整个数组的顺序myObservableArray.reverse();
给数组排序 myObservableArray.sort();
2把这个viewmodel添加到ko中
ko.applyBindings(new ViewModel());
3在DOM元素中绑定
<span>First name: <strong data-bind="text:firstName"> </strong></span>
<span>Last name: <strong data-bind="text:lastName">> </strong></span>
data-bind里面绑定的可以是DOM元素的任何属性或者方法，绑定方法时不需要加括号，但是如果要对这个方法进行计算处理，那就需要加括号。比如
<span>First name: <strong data-bind="click: test"></strong></span>
<span>First name: <strong data-bind="click: test()+‘1‘"> </strong></span>
上面test方法实现的是两个observable字段值的计算，我们可以通过ko的computed属性实现，它是observable类型，但它是基于其他observable字段值计算得出的）
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
}, self);
4使用模板实现循环计算
<div data-bind="template: { name: ‘test-template‘, data: first }"></div>
<div data-bind="template: { name: ‘ test-template‘, data: last }"></div>
<script type="text/html" id=" test-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function ViewModel() {
Var self=this;
self. first = { name: ‘Franklin‘, credits: 99 };
self. last = { name: ‘Mario‘, credits: 50 };
}
ko.applyBindings(new ViewModel());
17 </script>
关键在于script中的id要与data-bind中的name对应。
还有一种方式实现循环
function ViewModel() {
var self=this；
this.people = [
{ name: ‘Franklin‘, credits: 95 },
{ name: ‘Mario‘, credits: 50 }
]
}
ko.applyBindings(new ViewModel());
<div data-bind="foreach: people">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</div> 当然还有很多其他的ko方法与属性，可以参考http://knockoutjs.com/downloads/index.html学习