avalon的使用與總結


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),用於更新某一索引位置中的元素,因為簡單數組元素的數組,是不會轉換它的元素。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM