avalon视频学习笔记（二）

一、数据填充
含义：将数据打印到页面上，通过绑定属性，将页面变成动态模版
    1、插值表达式 {{prop}}，{{prop | html}}定界符及自动配置
        含义：{{prop}}是对某一文本节点的nodeValue进行修改，因此不会影响兄弟节点，{{prop}}只是表示这个地方可以被替换，在avalon中，它只在文本节点中有效，它不能替换属性节点里的名字，特性节点的名字必须以ms-开头。
        a、｛｛prop｝｝
  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>avalon-prop</title>
  4. 	<script type="text/javascript" src="../avalon.min.js"></script>
  5. 	<script>
  6. 		avalon.ready(function  () {
  7. 			avalon.define({
  8. 				$id:"test",
  9. 				word:"Hello avalon"
  10. 			})
  11. 			avalon.scan();
  12. 		})
  13. 	</script>
  14. </head>
  15. <body>
  16. 	<div ms-controller="test">
  17. 		{{word}}
  18. 	</div>
  19. </body>
            *在avalon还没没有加载完成，但是html文件已经绚烂完毕，导致｛｛word｝｝暴漏，应该怎么处理？
  1. <style>
  2. .ms-controller{
  3.  visibility:hidden;
  4. }
  5. </style>
               引用样式，可以正常显示。
                *插值表达式，是不可设置元素属性的。
           b、｛｛porp | html｝｝对加载的值进行过滤。
           c、修改插值表达式界定符
                当｛｛｝｝双尖括号被占用时，就可以通过修改config方法，进行修改。建议界定符的长度          大于1，不要设置为<<>>这样的位操作符。比如在DOMReady之前，调用如下语句：
  1. avalon.config({
  2.  interpolate:["[","]"]
  3. })
  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>avalon-prop</title>
  4. 	<script type="text/javascript" src="../avalon.min.js"></script>
  5. 	<script>
  6. 		avalon.config({
  7. 			interpolate:["[[","]]"]
  8. 		})
  9. 		avalon.ready(function  () {
  10. 			avalon.define({
  11. 				$id:"test",
  12. 				word:"Hello avalon"
  13. 			})
  14. 			avalon.scan();
  15. 		})
  16. 	</script>
  17. </head>
  18. <body>
  19. 	<div ms-controller="test">
  20. 		[[word]]
  21. 	</div>
  22. </body>
    2、绑定属性 ms-text，ms-html，ms-value
        a、ms-test
            含义：ms-text是文本绑定属性，会清空元元素的内部再进行内部填充。ms-text其实就是{{prop}}的真身，框架内部都是走同一处理函数，ms-text作为一个绑定属性，必须附于元素节点之上，因此没有前者那么方便
  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>avalon-prop</title>
  4. 	<script type="text/javascript" src="../avalon.min.js"></script>
  5. 	<script>
  6. 		avalon.ready(function  () {
  7. 			avalon.define({
  8. 				$id:"test",
  9. 				word:"Hello avalon"
  10. 			})
  11. 			avalon.scan();
  12. 		})
  13. 	</script>
  14. </head>
  15. <body>
  16. 	<div ms-controller="test" ms-text="word"></div>
  17. </body>
        b、ms-html
            含义:ms-html是html绑定属性，会清空原元素的内部，再进行内部填充。ms-html其实就是{{  porp | html }}的真身，框架内部都是走同一处理函数，ms-html作为一个绑定属性，必须附于元素节点之上，因此没有前者那么方便。
  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>avalon-prop</title>
  4. 	<script type="text/javascript" src="../avalon.min.js"></script>
  5. 	<script>
  6. 		avalon.ready(function  () {
  7. 			avalon.define({
  8. 				$id:"test",
  9. 				word:"<p>Hello avalon<p>"
  10. 			})
  11. 			avalon.define({
  12. 				$id:"test2",
  13. 				word:"<p>Hello avalon</p>"
  14. 			})
  15. 			avalon.scan();
  16. 		})
  17. 	</script>
  18. </head>
  19. <body>
  20. 	<div ms-controller="test" ms-text="word"></div>
  21. 	<div ms-controller="test2" ms-html="word"></div>
  22. </body>
  23. </html>
                两者的区别就是:
                text会将存储的字符串，当成text文本原样输出。
                html会将存储的字符串，当成html文本元素输出。
        c、绑定属性ms-value
            含义：用过ms-value指令，数据能通过表单元素的value值显示出来。ms-value为了应对复杂的显示，也支持插值表达式，但里面不能用过滤器。
  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>avalon-prop2</title>
  4. 	<script type="text/javascript" src="../avalon.min.js"></script>
  5. 	<script type="text/javascript">
  6. 	avalon.ready(function  () {
  7. 		avalon.define({
  8. 			$id:"text",
  9. 			text:'111'
  10. 		})
  11. 		avalon.scan();
  12. 	})
  13. 	</script>
  14. </head>
  15. <body>
  16. 	<div ms-controller="text">
  17. 		<input type="text" ms-value="text">
  18. 		<textarea name="" id="" cols="30" rows="10" ms-value="xxx{{text+'!!!'}}yyy"></textarea>
  19. 	</div>
  20. </body>

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





posted @ 2015-04-25 12:29  静文  阅读(169)  评论(0)  编辑  收藏  举报