我们先来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学习

ko学习笔记