KnockOut前端框架講解與練習

◆1 KnockOut.js是一個典型的MVVM(Module-View-ViewModule)框架，可以幫助用戶創建複雜的前端交換邏輯，簡化了與DOM的交互（按照規定綁定對HTML元素寫好標記，當HTML元素關聯值發生改變時，自動更新HTML狀態，使用戶可以專注於頁面邏輯和數據，而忽略HTML元素之間的動態更新）。KnockOut.js是純JavaScript框架，獨立運行，體積小（壓縮後13kb），支持所有主流瀏覽器（IE6+、Firefox2、Chrome、Safari）。 ◆2 簡單的文本輸入框綁定 編程思路： 1） 編寫一個匿名函數的實例變量，定義指向後創建要檢測的屬性值（觀察者模式） 2） 實例化ViewModuel 3） 將實例化的對象綁定到當前頁面 4） 頁面上調用data-bind實現綁定。 (document).ready(function()varViewModel=function()varself=this;self.userName=ko.observable();;varcurrentViewModuel=newViewModel();//實例化ViewModel對象ko.applyBindings(currentViewModuel);//將實例化對象綁定到當前頁面)◆3下拉選擇框：如果選擇框中內容是固定的，可以在html頁面寫死也可以在服務端頁面輸出的時候將其綁定好。但是如果是異步加載怎麼辦？將獲得的數組數據拼接成HTML字符串輸出到HTML頁面中（jquery思路）※jquery思路代碼：（拼接復雜）functionSelectOption(arr,weizhi)varstr=“”;for(varobjinarr)str+=”“+arr[obj]+”“;weizhi.html(str);※knockout思路代碼： (document).ready(function () { var ViewModule = function () { var self = this; self.fruitName = ko.observableArray([“apple”,”orange”,”banana”]); //對應options：fruitName selectedOptions：.DanFruit self.DanFruit = ko.observable(); }; var currentViewModule = new ViewModule(); ko.applyBindings(currentViewModule); })  ◆3 擴展 ko.observableArray([{key:”friut1”,value:”apple”},{key:”friut2”,value:”orange”},{key:”friut3”,value:”banana”}]); data-bind=”options:fruitName, optionsText:’key’,optionsValue:’value’,selectedOptions:DanFruit”  ◆4列表（對於頁面上的列表，可以通過服務器端取得數據後循環輸出；當數據量比較大時，需要Ajax請求，同時用到頁面拼接技術） ※jquery思路代碼：（拼接複雜） function RenderPlanets() { var tableBody = $(“#tableBody”); var planetsString = “”; for( var i in Planets){ planetsString+= ““; planetsString += ““+Planets[i].id+”“; planetsString += ““+Planets[i].englishName+”“; planetsString += ““+Planets[i].chineseName+”“; planetsString += ““+Planets[i].description+”“; planetsString+= ““; } tableBody.html(planetsString); } ※knockout思路代碼： var ViewModel = function () { var self = this; self.plants = ko.observableArray(Planets); self.newPlanet = function () { self.plants.push({id:10,englishName:”unknow”,chineseName:”未知行”,description:”等待人類去發現”}) return false; }}; var currentViewModel = new ViewModel(); ko.applyBindings(currentViewModel); 那麼，我們在html上的標誌怎麼搞？ -+ 新增  ◆4 擴展 （在冥王星上加上愛情 ）  ◆5 在實例開發時，當需要組合數據類型時怎麼辦？需要考慮兩個問題：數據的格式化和組合類型的數據如何編輯後再顯示。 var ViewModel = function(){ var self = this; self.Year = ko.observable(“”); self.Month = ko.observable(“”); self.Day = ko.observable(“”); self.Date = ko.computed(function () { return self.Year()+’-‘+self.Month()+’-‘+self.Day();});}; var currentViewModel = new ViewModel(); ko.applyBindings(currentViewModel); }); 如果有需求，要我們把Date的值讀出來，然後在付給一個input邊框怎麼辦？ self.Date = ko.computed({ write: function(value){ var indexOfYear = value.indexOf(‘年’); var indexOfMonth=value.indexOf(‘月’); var indexOfDay=value.indexOf(‘日’); self.Year(value.substring(0,indexOfYear)); self.Month(value.substring(indexOfYear+1,indexOfMonth)); self.Day(value.substring(indexOfMonth+1,indexOfDay)); }, read: function(){ return self.Year()+’年’+self.Month()+’月’+self.Day()+’日’; }, owner:self }); 這個value值是什麼？怎麼多一個參數出來，可以看出是js框架中讀取到的加在data-bind上value值。write加這個屬性值是爲了可以將屬性值進行編輯，read是我們讀取到的內容。在write屬性中可以對輸入的數字值進行設置，限定輸入的數字。 if(!/^d[4]/.test(indexy1))alert(“請輸入四位阿拉伯數字”);returnfalse;◆6事件及樣式的綁定需求：點擊開賺時底下那個數字會遞增（0,1,2,3,4,….）,鼠標移動到點擊開賺button時，數字變紅，離開後數字恢復成紅色。 (document).ready(function () { var viewmodule = function () { var self = this; self.currentNum = ko.observable(0); self.currentAdd = function () { var curr = self.currentNum(); curr++; self.currentNum(curr); }; self.beginColor = ko.observable(“black”);//設置觀察的模式顏色 self.moveIn = function () { self.beginColor(“red”); };//鼠標移入時的事件 self.moveOut = function () { self.beginColor(‘black’); }//鼠標移出時的事件 }; var currentvm = new viewmodule(); ko.applyBindings(currentvm); }) 綁定的頁面代碼