首頁 > web前端 > js教程 > JavaScript 中 avalon綁定屬性總結

JavaScript 中 avalon綁定屬性總結

高洛峰
發布: 2016-12-09 16:10:42
原創
1681 人瀏覽過

avalon是前端MVVM框架,將所有前端程式碼徹底分成兩部分,視圖的處理透過綁定實作(angular有個更酷炫的名詞叫指令),業務邏輯則集中在一個個叫VM的物件中處理。我們只要操作VM的數據,它就自然而然地神奇地同步到視圖。

$model(所有非$屬性),$event(事件對象)

1、作用域圈定

ms-controller:按著就近原則自下而上掃描DOM樹

ms-important:僅掃描本節點及之下作為掃描區

ms-skip:使綁定失效

2、ms-duplex雙向綁定屬性:除了綁定(VM同步資料到V)資料到DOM節點中,還會偷偷在節點上綁定一個監聽事件,當節點資料改變時,及時把V中的資料同步到VM中

(1)text,password,textarea要求綁定值為一個字串(ms-duplex-text)

(2)radio:綁定為boolean(ms-duplex-boolean)

(3)checkbox:綁定為陣列(ms-duplex-string)

(4)select:綁定為字串或陣列( ms-duplex-string)

後邊是ms-duplex2.0綁定屬性

3、ms-visible:類似toggle,表達式為true顯示,透過把display設定為block或none顯示或隱藏

4、true顯示,透過把display設定為block或none顯示或隱藏

4、true顯示插入移除處理ms-if:新增節點元素顯示元素,設定註解隱藏節點(刪除節點)

5、資料快取ms-data-*,儲存物件或陣列使用ms -data(綁定在DOM節點物件上而不是作為屬性),保存在節點上,顯示時處理返回,綁定為data-*屬性

6、屬性操作ms-class(class),ms-duplex( value),ms-attr,ms-href,ms-src

boolean屬性:ms-attr-disabled,ms-attr-readonly,ms-attr-selected,ms-attr-checked

字串固有屬性:ms -attr-id,ms-attr-name,ms-attr-title,ms-src,ms-href

自訂屬性:ms-attr-data-url,ms-attr-data-id


ms- class: ms-class='active' ms-class='active:isOk'

ms-active,ms-hover

7、ms-duplex2.0

ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex
登入後複製

   

fo

輔助data-du-plex-c -duplex-changed,data-duplex-event

8、樣式操作:ms-css(內聯),ms-class(外部引入)

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>
登入後複製

   

9、事件綁定:ms-on-eventName ,ms-eventName

ms-mouseenter,ms-mouseleave(僅作用於被選元素),ms-input(ms-on-input),多事件綁定順序與自然數無關,與事件順序有關

10、循環運算

ms-each-遍歷臨時變數(在父級元素上綁定)

ms-repeat-遍歷臨時變數(在子元素上綁定)

ms-with-歷時臨時變數(在父在等級元素上綁定)

數組:el預設臨時變量,$index當前元素的索引,$first是否為第一個元素boolean,$last,$remove返回一個function刪除當前元素,$outer內層循環外層循環變數

雜湊(物件):$key鍵名稱,$val鍵值,$outer ($outer.$index)

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>
登入後複製

   

修改物件的鍵值:

對:

修改數組的值:數組物件.set(下標,值)

修改數組中物件值:數組物件[下標].鍵名= 鍵值;

遍歷回調函數(屬性)

data-each-rendered

data-with-rendered

data-repeat-rendered

data-with-sorted

循環時使用size計算數據長度,而不是length,使用ms-if-loop而不是ms- if,因為ms-if優先於ms-repeat執行

11、模版引用

12、屬性監聽

13、模組通訊

下面介紹下avalon作用域圈定方法

在使用前端使用應用程式開發時,需要圈定資料綁定作用域,有三種方式:

(1)ms-controller:此綁定屬性會按著就近原則來圈定作用域,先從本標籤開始網上查找

(2)ms- important:此綁定屬性只查找本標籤,倘若查找不到vm綁定資料則原樣輸出在頁上

(3)ms-skip:此綁定屬性的作用是使資料綁定失效,即插值表達式原樣輸出,不管查找到作用域內綁定資料與否

🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板