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
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...