avalon視頻學習筆記（二）

時間 2019-12-02

標籤 avalon 視頻學習筆記简体版

原文原文鏈接

1、數據填充

含義：將數據打印到頁面上，經過綁定屬性，將頁面變成動態模版

一、插值表達式 {{prop}}，{{prop | html}}定界符及自動配置

含義：{{prop}}是對某一文本節點的nodeValue進行修改，所以不會影響兄弟節點，{{prop}}只是表示這個地方能夠被替換，在avalon中，它只在文本節點中有效，它不能替換屬性節點裏的名字，特性節點的名字必須以ms-開頭。

a、｛｛prop｝｝

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-prop</title> <script type="text/javascript" src="../avalon.min.js"></script> <script> avalon.ready(function () { avalon.define({ $id:"test", word:"Hello avalon" }) avalon.scan(); }) </script></head><body> <div ms-controller="test"> {{word}} </div></body>

* 在avalon還沒沒有加載完成，可是html文件已經絢爛完畢，致使｛｛word｝｝暴漏，應該怎麼處理？

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<style>.ms-controller{ visibility:hidden;}</style>

引用樣式，能夠正常顯示。

*插值表達式，是不可設置元素屬性的。

b、｛｛porp | html｝｝對加載的值進行過濾。

c、修改插值表達式界定符

當｛｛｝｝雙尖括號被佔用時，就能夠經過修改config方法，進行修改。建議界定符的長度大於1，不要設置爲<<>>這樣的位操做符。好比在DOMReady以前，調用以下語句：

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
avalon.config({ interpolate:["[","]"]})

    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
    
    
<head> <meta charset="UTF-8"> <title>avalon-prop</title> <script type="text/javascript" src="../avalon.min.js"></script> <script> avalon.config({ interpolate:["[[","]]"] }) avalon.ready(function () { avalon.define({ $id:"test", word:"Hello avalon" }) avalon.scan(); }) </script></head><body> <div ms-controller="test"> [[word]] </div></body>

二、綁定屬性 ms-text，ms-html，ms-value

a、ms-test

含義：ms-text是文本綁定屬性，會清空元元素的內部再進行內部填充。ms-text其實就是{{prop}}的真身，框架內部都是走同一處理函數，ms-text做爲一個綁定屬性，必須附於元素節點之上，所以沒有前者那麼方便

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-prop</title> <script type="text/javascript" src="../avalon.min.js"></script> <script> avalon.ready(function () { avalon.define({ $id:"test", word:"Hello avalon" }) avalon.scan(); }) </script></head><body> <div ms-controller="test" ms-text="word"></div></body>

b、ms-html

含義:ms-html是html綁定屬性，會清空原元素的內部，再進行內部填充。ms-html其實就是{{ porp | html }}的真身，框架內部都是走同一處理函數，ms-html做爲一個綁定屬性，必須附於元素節點之上，所以沒有前者那麼方便。

  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
<head> <meta charset="UTF-8"> <title>avalon-prop</title> <script type="text/javascript" src="../avalon.min.js"></script> <script> avalon.ready(function () { avalon.define({ $id:"test", word:"<p>Hello avalon<p>" }) avalon.define({ $id:"test2", word:"<p>Hello avalon</p>" }) avalon.scan(); }) </script></head><body> <div ms-controller="test" ms-text="word"></div> <div ms-controller="test2" ms-html="word"></div></body></html>

二者的區別就是:

text會將存儲的字符串，當成text文本原樣輸出。

html會將存儲的字符串，當成html文本元素輸出。

c、綁定屬性ms-value

含義：用過ms-value指令，數據能經過表單元素的value值顯示出來。ms-value爲了應對複雜的顯示，也支持插值表達式，但裏面不能用過濾器。

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
<head> <meta charset="UTF-8"> <title>avalon-prop2</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function () { avalon.define({ $id:"text", text:'111' }) avalon.scan(); }) </script></head><body> <div ms-controller="text"> <input type="text" ms-value="text"> <textarea name="" id="" cols="30" rows="10" ms-value="xxx{{text+'!!!'}}yyy"></textarea> </div></body>