迷你 MVVM架構avalon的使用教程

最近有許多人問我怎麼用這東西，如果是那些用過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，做登入後無縫重新整理頁面這樣操作毫無壓力。