最近有許多人問我怎么用這東西，如果是那些用過knockout的人還好，之前沒有接觸過MVVM的人可能一頭霧水。大多數人被我那個jquery ui的演示吸引過來，都深感它的威力之大。
這里詳細介紹一下它的用法吧。
第一步，當然是引入avalon庫，就像引入jQuery庫那樣，當然要從官網下。現在avalon的地址為這個，只要這個文件就好了，當然旁邊還有個avalon_min.js。
第二步，是創建ViewModel，就是MVVM最后那兩個字母的全稱。它是M的再包裝，用於自動同步視圖，當然視圖也能自動同步VM。VM與V這種雙向綁定的特性非常誘人，可以讓我們少寫無數代碼，尤其是那樣麻煩的DOM代碼。雖然jQuery提供了強大的DOM操作，但還是你一個個去選擇操作。MVVM完全讓你脫離DOM的桎梏，帶着生產力的飛躍。其效果不亞於后端的ORM框架讓人們從各種數據庫與SQL的兼容之苦釋放出來那樣舒心。如果順着這比喻，ViewModel其實與數據庫中的表一樣，ViewModel中的屬性就是表中的字段。一個表專門負責某一個版塊的數據存儲，而一個ViewModel專門負責頁面上某個區域的渲染工作。因此這里有個作用域的概念，一個ViewModel是專門作用於頁面上某個區域。不過，這里換上CSS的思路理解會更好，一個CSS類名會對添加了它的元素及其孩子發生影響。avalon把這個綁定稱之為ms-controller（這來自angular的名字），有關ms-controller的更多描述可見這里。
avalon.ready(function() {
avalon.define("area", function(vm) {
vm.xxx = "xxx"
vm.yyy = "yyy"
vm.toggle = true;
vm.$watch("toggle", function(newValue, oldValue) {//監聽toggle的變化,一變就執行回調
console.log(newValue);
//這里可以做更多你喜歡做的事
//通常,我們不宜在這里寫太多DOM邏輯,因為DOM操作基本框架綁定你干了
//你只需要這里設置其他vm中的屬性的新值，通過多米諾骨牌效應驅動頁面自動刷新
});
});
avalon.scan()
//avalon.scan可以傳入兩個可選參數，第一個作為掃描起點的元素節點，如document.body,
//第2個ViewModel,avalon.define是有返回值，直接放進去(詳見文檔)
})
第三步，對視圖進行綁定。其中最重要的是ms-controller，用於圈定ViewModel的作用域，然后在它本身與孩子中進行其他綁定。
<p ms-controller="area" ms-visible="toggle"><span>{{xxx}}</span><span ms-class-red="toggle">{{xxx}}</span></p>
綁定是我們處理DOM的重要渠道。如果學過knockout的人，可以到這里看它們怎么用，或者看官網的示例與文檔。
avalon能幫你做什么？
- 數據填充，比如表單的一些初始值，切換卡的各個面板的內容({{xxx}},{{xxx|html}}, ms-html)
- 類名處理，如隔行變色，掠過變色(ms-class, ms-hover)
- 事件綁定(ms-click)
- 屬性處理(ms-checked, ms-href, ms-disabled)
- 數據格式化與驗證(過濾器與$watch)
- 將某個元素轉為一些功能更強大的UI，如果拖動塊，滑動塊，彈出層，顏色選擇器，手風琴，切換卡……
有了avalon，做登錄后無縫刷新頁面這樣操作毫無壓力。