avalon綁定屬性總結

来源:http://www.cnblogs.com/zhang134you/archive/2016/10/19/5976124.html
-Advertisement-
Play Games

$model(所有非$屬性),$event(事件對象) 1、作用域圈定 ms-controller:按著就近原則自下而上掃描DOM樹 ms-important:僅掃描本節點及之下作為掃描區 ms-skip:使綁定失效 2、ms-duplex雙向綁定屬性:除了綁定(VM同步數據到V)數據到DOM節點中 ...


$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、模塊通信


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • <script type="text/javascript"> window.onload = function cc() { var tr=document.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ tr[i].style. ...
  • 我現在做的一個項目是angular,但是我用直接引用百度地圖的方法引進js,寫html,js代碼,發現,我去,報錯了,我一開始還以為是百度地圖跟angular有衝突,然後我就去搜索啊,發現angular也有一個百度地圖插件,無奈我用了報錯了,網上說要用angular2版本才能相容,但是我又不會下載2 ...
  • 我們中國嘛傳統段落就是要首行縮進兩個字,首先首行縮進的css是text-indent: 然後這個值是多少呢,一般你的字母的font-size是多少,text-indent:2*font-size的值 比如你的字的字體大小是16px,那麼你想讓段落首行縮進兩個字的話就是text-indent:2*16 ...
  • [TOC] 名詞解釋 state: 它是組件的屬性,主要用來存儲組件自身需要的數據。 虛擬DOM: 它是ReactJS中提出的一個概念,是將真實的DOM結構映射成一個JSON數據結構。 1.組件生命周期 1.創建階段 :該方法會返回一個對象,並緩存下來。然後與父組件指定的props對象合併,最後賦值 ...
  • 註意:這個速率限制API是在Knockout 3.1.0中添加的。 通常,更改的observable立即通知其訂戶,以便依賴於observable的任何計算的observable或綁定都會同步更新。 但是,rateLimit擴展器會導致observable在指定的時間段內抑制和延遲更改通知。 因此,... ...
  • 首先我們在使用Media的時候需要先設置下麵這段代碼,來相容移動設備的展示效果: 準備工作1:設置Meta標簽 這段代碼的幾個參數解釋: width = device-width:寬度等於當前設備的寬度 initial-scale:初始的縮放比例(預設設置為1.0) minimum-scale:允許 ...
  • 在使用avalonJS做前端開發時,需要圈定數據綁定作用域,存在三種方式: (1)ms-controller:此綁定屬性會按著就近原則來圈定作用域,先從本標簽開始網上查找 (2)ms-important:此綁定屬性僅查找本標簽,倘若查找不到vm綁定數據則原樣輸出在頁面上 (3)ms-skip:此綁定 ...
  • Knockout允許您實現複雜的客戶端交互性,但幾乎所有Web應用程式還需要與伺服器交換數據,或至少將本地存儲的數據序列化。 最方便的交換或存儲數據的方式是JSON格式 - 大多數Ajax應用程式今天使用的格式。 載入或保存數據 Knockout不強制您使用任何一種特殊技術來載入或保存數據。 您可以... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...