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