Knockout js類庫學習筆記（一）資料繫結

KnockoutJS是一個常用的JS架構，目的為減少開發人員在使用JS或JQuery時大量的DOM操作所導致的作業碼複雜且難以理解，並且有助於資料與HTML的分離，在團隊中大家統一認同此架構的前提下，能夠提高開發效率。

本人也是最近開始使用這套架構，並且記錄下一般性的使用心得，以備日後查閱。如果能夠協助大家解決一些自己的問題，實屬超出預計。：）

所有關於下載，API查閱，樣本均在此http://knockoutjs.com/

首先引入Knockout檔案knockout-3.0.0.js和knockout.mapping.min.js兩個必要檔案，Knockout可以獨立於JQuery類庫運行，So Jquery類庫不是必要條件。

Knockout最強大和最常用的工具在於雙向繫結（TwoWay-binding），適用於任何需要綁定資料的情境。使用也很簡單方便。這裡分為多個樣本講解一些常見的binding

HTML（為保證重複利用，這是所有代碼共用之HTML）：

        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>    <script src="js/knockout/knockout-3.0.0.js" type="text/javascript"></script>    <script src="js/knockout/knockout.mapping.min.js" type="text/javascript"></script>    <script src="js/knockout/koExternalTemplateEngine_all.min.js" type="text/javascript"></script>    <script src="js/JScript1.js" type="text/javascript"></script>        

注意js改為自己的路徑。

樣本一：

簡單observable綁定

    var TestModel = {};    TestModel.FirstName = ko.observable("Arwind");    TestModel.LastName = ko.observable("Gao");    TestModel.FullName = ko.computed(function () {        return TestModel.FirstName() + " " + TestModel.LastName();    });

簡單的一個Model類 對應之HTML

JS最後需要添加綁定代碼（這段代碼只需添加在最後，僅需添加一次，之後樣本不再贅述）

    ko.applyBindings(TestModel, document.getElementById("testDiv"));

上面的代碼只能執行一次 若需要相應資料的變化 如ajax請求導致多次綁定，需要多加判斷，例如此Model直接從Json資料mapping過來，則只需再次mapping改變model的值即可改變HTML端：

                    if (TestModel == undefined) {                        TestModel = ko.mapping.fromJS(girds);                        ko.applyBindings(TestModel, document.getElementById("testDiv"));                    }                    else {                        ko.mapping.fromJS(girds, {}, TestModel);                    }

樣本二：

css的綁定

HTML

            ooo

樣本三

URL的綁定

HTML

Tecent

Knockout

    TestModel.Url = function () {        return "www.baidu.com";    };

樣本四

子Model嵌套綁定

Knockout

    //with用於子model綁定    TestModel.SubViewMode = [{ Name: "Name1" }, { Name: "Name2"}];    TestModel.SubViewMode2 = { Items: [{ Name: "Name1" }, { Name: "Name2"}] };

HTML

                            
 
                    
  
1
                
 
                                        
 
                    
  
1
                
 
            

樣本五

事件綁定

HTML

Knockout

    TestModel.ClickTest = function () {        alert("test");    };

樣本六

帶參數的事件綁定

HTML

Knockout

    TestModel.ClickJoinName = function (FirstName, LastName) {        alert(FirstName + "," + LastName);    };

樣本七

簡單observable計數器

HTML

Knockout

    TestModel.CountValue = ko.observable(0);    TestModel.ClickCount = function () {        var v = this.CountValue();        this.CountValue(v + 1);    };

先到這裡吧 下次再說..