avalon是前端MVVM框架,將所有前端代碼徹底分成兩部分,視圖的處理通過綁定實現(angular有個更炫酷的名詞叫指令),業務邏輯則集中在一個個叫VM的對象中處理。我們只要操作VM的數據,它就自然而然地神奇地同步到視圖。
作用域綁定
ms-controller:
<div ms-controller="AAA"></div>:對應avalon.define({$id=AAA});要加上avalon.scan();才能顯示.
ms-controller:可向上一級的html尋找
ms-important:不可向上一級的html尋找
ms-skip:不顯示指令
{{??}}:插值表達式,可以顯示avalon的內容
但,也有例外,如下:
avalon.congig({
interpolate:["[[","]]"]
});//用[[]]代替了{{}}
ms-text,ms-html:
<div ms-text="content">content在avalon.define函數中定義的</div>
<div ms-html="content">把字符串轉為為html模式例如<b>??</b>會自動地轉換為加粗</div>
ms-duplex="prop":雙向綁定,當元素為text,password,textarea時,要求prop為一個字符串,當我們改變它的內容時,avalon就會將此元素的value賦給prop
當元素為radio時,要求prop為一個布爾值,當我們改動它的內容時,avalon就會將此元素的check值(布爾)賦給prop.
當元素為checkbox時,要求prop為一個數組,當我們改變它的內容時,avalon就會將此元素的value值push進prop
當元素為select時,要求prop為一個字符串或數組(視multiple的值),當我們選中它的某一個項時,avalon就會將此option元素的value值或text值(沒有value時)push進prop
ms-duplex-text="prop",只能用於模擬text控件的行為,要求prop為一個字符串,當我們選中某一個radio時,avalon就會將此元素的value值賦給prop用於實現多選一
ms-duplex-boolean="prop",只能用於radio,要求prop為一個布爾,並且元素的value為ture或flase,當我們選中某一個radio時,avalon就會將此元素的value轉換為布爾,賦給對應的prop.
ms-date-duplex-observe="flase",我們可以在元素節點上定義data-duplex-observe="flase"來禁止雙向同步
ms-visible,如果它后面跟着的表達式是真的則顯示,假的則隱藏
ms-if,如果它后面跟着的表達式為真的則存在,假的則移除、在使用ms-repeat時,如需使用ms-if,則要用ms-if-loop,因為ms-if的等級在ms-repeat之前。
屬性操作:
數據緩存:綁定屬性ms-data-*:avalon是數據緩存功能與jQuery的data()類似,但不同於jQuery的是:avalon是直接將數據保存到元素節點的data-*屬性上。在從data-*屬性還原數據時,它會做簡單的數據轉換,再返回。在ms-data綁定屬性中,對象與數組是直接保存在元素節點上的。
屬性綁定:
布爾屬性綁定:ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked,如果后面所跟的值為ture,則顯示該屬性。例如ms-attr-disabled="ture";
DOM屬性:disabled 屬性可設置或返回是否禁用單選按鈕。
readonly 屬性規定輸入字段為只讀。
字符串屬性綁定:ms-attr-id,ms-attr-name,ms-attr-title,ms-href,ms-src,ms-attr-data-url(自定義),后面所跟的是插值表達式,例如,ms-attr-id="{{id}}"
類名屬性:ms-class,見圖片類名屬性。ms-active,ms-hover:分別是用來模擬:active,:hover效果,用法與ms-class一樣
ms-active:只在點擊的那一瞬間有效果
ms-hover:只在掠過時有效果,失去焦點或離開目標元素就會移除剛才添加的類名
攔截器:
ms-duplex監聽的是value.
樣式操作:ms-css-width,ms-css-height,ms-css-background-color,ms-css-color,ms-css-font-size;
事件操作:ms-click($remove),單擊后直接清除,ms-mouseenter,ms-mouseleave,ms-on-input
循環綁定:ms-repeat,ms-each,后者在副元素先綁定
數組循環:ms-repeat,ms-each
對象循環:ms-repeat,ms-with
臨時變量:$first,$last.$index,$outer
循環顯示數組的臨時變量:
循環顯示對象的臨時變量:
更新數據:
回調函數綁定:data-repeat-rendered,data-with-rendered,data-with-sorted,data-repeat-rendered
監控數組的方法與普通數組沒什么不同,它只是被重寫了某一部分方法,如 pop, shift, unshift, push, splice,sort, revert。其次添加了四個移除方法,remove, removeAt, removeAll, clear, 及ensure,pushArray, size,set方法。
- pushArray(el), 要求傳入一數組,然后將它里面的元素全部到當前數組的末端。
- remove(el), 要求傳入一元素,通過全等於比較進行移除。
- removeAt(index), 要求傳入一數字,會移除對應位置的元素。
- removeAll(arrayOrFunction), 有三種用法,如果是一個函數,則過濾比較后得到真值的元素, 如果是一數組,則將此數組中與原數組相等於的元素全部移除;如果沒有任何參數,則全部清空。
- clear(),相當於removeAll()的第三種方法,清空數組的所有元素。由於需要同步視圖的緣故,不能通過vm.array.length = 0的方法來清空元素。
- ensure(el),只有當數組不存在此元素時,只添加此元素。
- size(),返回數組的長度。由於length屬性是固有屬性,無法hack,也就無法實現雙向綁定,因此請用它來代替length。
- set(index, el),用於更新某一索引位置中的元素,因為簡單數組元素的數組,是不會轉換它的元素。