knockout.js简单实用教程1

第一次接触knockout是在一年多以前吧。当时是接手了一个别人的项目，在项目中有用到knockout来进行数据的绑定。也就开始学习起来knockout。在以后的项目中也屡次用到了这个。在第一次开始学习的时候也遇到了一些困难。因此呢想写一篇比较入门的教程让你们来了解和使用knockout,其实全部的使用方法均可以去官网的文档里去查看里面写的很详细。我这里呢是为了那些还不习惯看英文文档而且刚入门的人看得（PS：坏习惯得改啊由于大部分文档都是英文的）

废话很少说了。先简单说明一下是knockout ，knockout.js是一个轻型的MVVM前台框架，说简单一点就是用来绑定数据的。它的优势是若是数据源发送改变那么它会自动刷新数据,而不须要你手动的再次绑定,第二个好处先后台代码的分离也就是MVVM的思想吧。觉得ASP.NETMVC为例吧。在ASP.NETMVC中若是你须要绑定数据你要怎么作，以往的作法是把数据给到viewdata里面，而后在前台用razor语法进行绑定也就是经过后台代码进行绑定。可是它带来的问题是你须要加各类判断来去除为空的状况，不然就会出现讨厌的黄页了。并且你没办法异步的刷新页面.而经过knockout你就彻底不须要考虑这个问题了，这也就是MVVM带来的好处。我只须要处理json数据就好了。关于介绍就说这么多了。其余的好处大家在使用中慢慢体会吧.

在是用knockout以前，你须要了解几个概念

首先是Viewmodel 这个模型和MVC的model不是一个东西。这个viewmodel一个JS对象

像这样的

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

 

在一个页面中你能够声明多个VM模型。可是我不建议这么作。缘由后面我会讲到。

knockout绑定的基本语法是 

The name is <span data-bind="text: personName"></span>

在标签中直接打上属性data-bind来实现绑定。支持文本绑定，html绑定，属性绑定，css绑定等等。我就不一一列举了想要了解详情的同窗能够去knockout官网查看地址是 http://knockoutjs.com/documentation/introduction.html 

knockout的语法是很是的灵活的。不少语法当你不知道怎么写的时候你能够试试就按你平时写后台代码的语法试试说不定就能够了。固然查官方文档仍是最快的方式了。

上面的绑定还差最后一步那就是

ko.applyBindings(myViewModel);

把模型绑定到document里,固然你也能够把数据绑定到具体的document对象上好比,div,table之类语法和上面的类型

ko.applyBindings(myViewModel,document.getElementById("具体的dom对象的id"));

 

上面的这边绑定方式呢比较死。由于数据是写死的那如何动态的绑定呢？也就是数据源改变了页面自动更新 ,这里就要介绍observables语法了 observables简单来讲就是自动绑定。若是元数据改变了的话它会自动更新它本身。下面给个列子

// 当前模型
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
    this.fullName = ko.pureComputed(function() {
        // 当firstname改变是会更新模型
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); //给定初始值并进行绑定

这个是JS建立模型和模型绑定的代码相信你们能看的明白。简单说明一下大概的意思就是建立一个模型。模型有两三个字段其中两个经过自动绑定标识的也就意味着当他被改变的时候模型会自动更新。也就意味着。第三个字段会自动进行更新。下面给出绑定代码。

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

在这个地址 http://jsfiddle.net/rniemeyer/bxfXd/  能够调试这个代码.  相信看完这段代码你们能明白什么是自动更新数据了吧. 

通常呢在页面上咱们还须要给dom对象绑定上事件。那么在knockout里面是怎么绑定事件的呢？下面给出说明，照例先贴出来一段代码

var ClickCounterViewModel = function() {
    this.numberOfClicks = ko.observable(0);
 
    this.registerClick = function() {
        this.numberOfClicks(this.numberOfClicks() + 1);
    };
 
    this.resetClicks = function() {
        this.numberOfClicks(0);
    };
 
    this.hasClickedTooManyTimes = ko.pureComputed(function() {
        return this.numberOfClicks() >= 3;
    }, this);
};
 
ko.applyBindings(new ClickCounterViewModel());

上面的代码。相信你们也都能看的明白。很简单的逻辑就用来统计点击次数。若是用面向对象的思想来看的话。就是说一个“对象”有各类各样的属性，好比姓名啊性别啊之类 称之为对象的属性。也有各类的行为，好比吃饭啊走路啊。这称之为对象的行为。这里的属性对象对象的就是ko(knockout后文中都以此来替代)的字段了，对象的行为也就是ko里面的js事件了。绑定ko的话能够称为对象的初始化. 以上这些解释呢是为了让读者能更方面的理解ko的模型的含义。说了这么多那怎么绑定事件呢？下面给出dom绑定的代码

<div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div>
 
<button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button>
 
<div data-bind='visible: hasClickedTooManyTimes'>
    That's too many clicks! Please stop before you wear out your fingers.
    <button data-bind='click: resetClicks'>Reset clicks</button>
</div>

同上也给出调试的地址 http://jsfiddle.net/rniemeyer/3Lqsx/   

 

相信看完上面的内容。你们对ko已经有了必定的了解了 下面在说明如何绑定json对象。这也是咱们用的最多的方式了。这里在结合前面的绑定方式作一个总的例子,

下面的例子中有绑定事件,绑定简单数据和数组集合.废话很少说直接上代码.

第一步固然仍是建立模型对象了

var SimpleListModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); // 把你输入的文本插入到数组里.
            this.itemToAdd(""); // 清空itemtoadd字段的文本内容 
        }
    }.bind(this); 
};
 
ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));//这里能够进行初始化你能够把你拿到的json数据直接丢进去就好了

 

在建立这个模型对象的时候我对第一个属性的类型的声明为 ko.observableArray() ，上面的例子用的是ko.observable 他们两个的区别的是 绑定单个字符仍是绑定数组集合，只有这点区别。其余的都是同样的，你要是把VM当作一个对象来处理就更好理解了。就是至关于对象里字段的类型一个是int 一个是list<int>。

下面直接给出绑定dom的代码

<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>

 

调试地址 http://jsfiddle.net/rniemeyer/bxfXd/

相信看过以前的内容后看这个绑定的话应该也能够容易理解了。从这里也能够看出来ko的语法是很是灵活的。能够很是随意的去写。这也是脚本语言的优点。

看到这里你们应该对ko的总体和简单的使用有了必定的了解，也确定会有不少的疑问（能够直接文章下面留言提出来）。可是到这并无结束。在之后的时间里我会继续完成这一系列的关于ko的教程。这其中不少内容我是参考了官方的文档来编写的。也有个人一些理解在里面若有不足之处请见谅。

 

knockout.js官方下载地址 http://knockoutjs.com/downloads/index.html