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>

三、过滤器 html、uppercase、lowercase、truncate、camelize、escape、currency、number、date多过滤器协同工做，自定义过滤器

来自为知笔记(Wiz)