Leon的程式心得

Knockout.js(KO)的主要功能是什麼呢?

簡單來說，是用來即時更新與使用者互動後的頁面

KO會依據使用者的操作(比如說輸入資料)，即時反應在頁面上

而不需要額外再寫Javascript做處理或者更新頁面(像是用onChange做變更後的處理)

雖然一開始摸覺得有點複雜，但用了一段時間後覺得自動更新真的很方便

只要稍微設定一下就可以丟給KO處理了，懶人的福音阿XD

一開始的頁面

輸入姓名後就會自動顯示在下面

Knockout.js(KO)的觀念是MVVM(Model–View–ViewModel)，和MVC非常相似

Model代表物件導向裡的物件

View是使用者看到的介面(UI)

ViewModel則是View會使用到的綜合物件

而KO會利用所謂的繫結器(Binder)，將View與ViewModel繫結(Binding)在一起

只要其中一個有變動，另外一個就會跟著變動，這就是所謂的雙向繫結(Two-Way Binding)

 

那Model和ViewModel都是物件，到底差在哪呢?

來打個比方，Model就像是一位學生，每個Model都會有身高、體重、年齡等屬性

而ViewModel則像是教室，裡面不僅會有很多學生(Model)，還會有上課、吃飯、午休等事件

甚至是課桌椅等其他物件，將包含學生(Model)在內的所有事物包裝起來就是教室(ViewModel)。

實際上怎麼操作呢?首先，我們先建立一個簡單的頁面:

<p>請輸入姓氏 : <input data-bind="value: firstName"></p>
<p>請輸入名字 : <input data-bind="value: lastName"></p>

<p>姓氏 : <strong data-bind="text: firstName"></strong></p>
<p>名字 : <strong data-bind="text: lastName"></strong></p>

顯示出來就像這樣

裡面的程式碼代表什麼呢?

data-bind表示我要利用KO來binding這個物件

而括號裡面的值代表我要binding這個物件裡的什麼屬性

以及與ViewModel裡的什麼物件做binding

 

而script裡的程式碼如下:

//viewModel物件
function AppViewModel() {
    var self = this;
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
}

ko.applyBindings(new AppViewModel());

不要懷疑，就是那麼幾行的程式碼，就可以做到即時更新頁面的效果，你說好用不好用?

​首先var self = this這行是可以不用寫，但如果ViewModel裡面很長的話

開頭都是藍藍的也不美觀，所以習慣上還是會寫上去

再來，ko.observable是KO的一個功能，代表我要觀察該變數的狀態

若該變數的值有變動，KO便會立即反映到View上

而括號內的值則代表預設的初始值，此處表示我預設為空

將ViewModel寫好後，用ko.applyBindings這個方法來監測指定的ViewModel後就大功告成啦~~~

以上是KO最基礎的部分，下一篇再來寫加入Model的用法