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