JavaScript 中 avalon綁定屬性總結_javascript技巧

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、插入移除處理ms-if:添加節點元素顯示元素，設定<!--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

輔助data-duplex-focus,data-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範圍圈定方法

在使用avalonJS做前端開發時，需要圈定資料繫結範圍，存在三種方式：

（1）ms-controller:此綁定屬性會按著就近原則來圈定範圍，先從本標籤開始網上尋找

（2）ms-important:此綁定屬性僅尋找本標籤，倘若尋找不到vm綁定資料則原樣輸出在頁面上

（3）ms-skip:此綁定屬性的作用是使資料繫結失效，即插值運算式原樣輸出，不管尋找到範圍內綁定資料與否

以上所述是小編給大家介紹的JavaScript 中 avalon綁定屬性總結，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！