avalon是前端MVVM框架，將所有前端代碼徹底分成兩部分，視圖的處理通過(guò)綁定實(shí)現(xiàn)（angular有個(gè)更炫酷的名詞叫指令），業(yè)務(wù)邏輯則集中在一個(gè)個(gè)叫VM的對(duì)象中處理。我們只要操作VM的數(shù)據(jù)，它就自然而然地神奇地同步到視圖。

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

1、作用域圈定

ms-controller：按著就近原則自下而上掃描DOM樹(shù)

ms-important：僅掃描本節(jié)點(diǎn)及之下作為掃描區(qū)

ms-skip：使綁定失效

2、ms-duplex雙向綁定屬性：除了綁定（VM同步數(shù)據(jù)到V）數(shù)據(jù)到DOM節(jié)點(diǎn)中，還會(huì)偷偷在節(jié)點(diǎn)上綁定一個(gè)監(jiān)聽(tīng)事件，當(dāng)節(jié)點(diǎn)數(shù)據(jù)發(fā)生變化時(shí)，及時(shí)把V中的數(shù)據(jù)同步到VM中

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

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

(3)checkbox:綁定為數(shù)組(ms-duplex-string)

(4)select:綁定為字符串或者數(shù)組(ms-duplex-string)

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

3、ms-visible：類似toggle,表達(dá)式為true顯示,通過(guò)把display設(shè)置為block或者none顯示或隱藏

4、插入移除處理ms-if:添加節(jié)點(diǎn)元素顯示元素，設(shè)置<!--ms-if-->注釋隱藏節(jié)點(diǎn)（刪除節(jié)點(diǎn)）

5、數(shù)據(jù)緩存ms-data-*,保存對(duì)象或者數(shù)組使用ms-data（綁定在DOM節(jié)點(diǎn)對(duì)象上而不是作為屬性），保存在節(jié)點(diǎn)上，顯示時(shí)處理返回，綁定為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

輔助data-duplex-focus,data-duplex-changed,data-duplex-event

8、樣式操作：ms-css(內(nèi)聯(lián))，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)，多事件綁定順序與自然數(shù)無(wú)關(guān)，與事件順序有關(guān)

10、循環(huán)操作

ms-each-遍歷臨時(shí)變量（在父級(jí)元素上綁定）

ms-repeat-遍歷臨時(shí)變量（在子元素上綁定）

ms-with-遍歷臨時(shí)變量（在父級(jí)元素上綁定）

數(shù)組：el默認(rèn)臨時(shí)變量，$index當(dāng)前元素的索引，$first是否為第一個(gè)元素boolean,$last,$remove返回一個(gè)function刪除當(dāng)前元素，$outer內(nèi)層循環(huán)外層循環(huán)變量

哈希（對(duì)象）：$key鍵名,$val鍵值,$outer （$outer.$index）

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>

修改對(duì)象的鍵值：

修改對(duì)象的鍵值對(duì)：

修改數(shù)組的值：數(shù)組對(duì)象.set(下標(biāo)，值)

修改數(shù)組中對(duì)象值:數(shù)組對(duì)象[下標(biāo)].鍵名 = 鍵值；

遍歷回調(diào)函數(shù)(屬性)

data-each-rendered

data-with-rendered

data-repeat-rendered

data-with-sorted

循環(huán)時(shí)使用size計(jì)算數(shù)據(jù)長(zhǎng)度,而不是length,使用ms-if-loop而不是ms-if,因?yàn)閙s-if優(yōu)先于ms-repeat執(zhí)行

11、模版引用

12、屬性監(jiān)聽(tīng)

13、模塊通信

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

在使用avalonJS做前端開(kāi)發(fā)時(shí)，需要圈定數(shù)據(jù)綁定作用域，存在三種方式：

（1）ms-controller:此綁定屬性會(huì)按著就近原則來(lái)圈定作用域，先從本標(biāo)簽開(kāi)始網(wǎng)上查找

（2）ms-important:此綁定屬性僅查找本標(biāo)簽，倘若查找不到vm綁定數(shù)據(jù)則原樣輸出在頁(yè)面上

（3）ms-skip:此綁定屬性的作用是使數(shù)據(jù)綁定失效，即插值表達(dá)式原樣輸出，不管查找到作用域內(nèi)綁定數(shù)據(jù)與否

以上所述是小編給大家介紹的JavaScript 中 avalon綁定屬性總結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論