2012年8月13日 星期一

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")。



沒有留言:

張貼留言