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