Knockoutjs 2 MVVM

Knockoutjs使用MVVM設計模式：

• Model：
      在client serve並使用ajax技術的架構中，為負責ajax remote部分，並儲存從遠端API取回的原始資料，在非使用ajax架構中則是負責商業邏輯部分。
• ViewModel (VM)：
      View與Model溝通的橋接，knockoutjs中ViewModel與View之間會綁定(bind)，若再替VM中的屬性加上觀察者(Observables)，即可在屬性變動時更新被bind的UI元素。
• View：
      顯示元件，knockoutjs中的View對象就是HTML元素。

建立一個ViewModel (Create ViewModel)：

var myViewModel = {
    userName: 'maggie',
    userAge: 25,
    height: 165
};

這個ViewMode還未使用到Observables，所以只會更新一次，之後屬性被改變，都不會更新UI。

設置View Bind對象宣告：

姓名：<span data-bind="text: userName"></span></br>
年齡：<span data-bind="text: userAge"></span></br>
身高：<span data-bind="text: height"></span>

執行knockoutjs榜定：

ko.applyBindings(myViewModel);

變更userName：

MyViewModel.userName = "小J";

程式執行結果：
姓名：maggie
年齡：25
身高：165

Note：由執行結果中可見，雖然屬性被改變，但是View並未Refresh，這是因為ViewModel內的屬性還未使用 Observables。


使用Observables：

var myViewModel = {
    userName : ko.observable('maggie'),
    userAge : ko.observable(25),
    height : ko.observable(165)
};

ko.applyBindings(myViewModel);
myViewModel.userName("小J");
myViewModel.userAge(34);
myViewModel.height(168);

使用觀察者模式後的執行結果：
姓名：小J
年齡：34
身高：168 

Note：注意使用Observables模式，屬性對象將變成一個function，因此屬性值改變會是，myViewModel.userName("小J")。