一、数据填充
含义:将数据打印到页面上,通过绑定属性,将页面变成动态模版
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>
2、绑定属性 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>
3、过滤器 html、uppercase、lowercase、truncate、camelize、escape、currency、number、date多过滤器协同工作,自定义过滤器