avalon视频学习笔记（一）

一、禁用加载器
    方法一：在js文件中书写
  1. avalon.config({
  2.  loader: false
  3. })
    方法二：在avalon源文件中添加
  1. avalon.config({
  2.  loader: false
  3. })
    方法三：在源文件中删除amd加载器

二、作用域绑定
含义：作用域范围圈定，在一个页面中需要形成多个模块，每个模块需要实现不同功能。
    1、ms-controller 可以互相嵌套的作用域
        含义：在页面上表现为一个特殊属性，其属性值为ViewModel的$id，表现将在此元素或者其子孙元素上圈定它的作用域范围，但是如果这些html存在它没有的属性，它可以向上查找上一级的ViewModel的属性。换言之，ms-controller可以互相嵌套。
  1. <script type="text/javascript">
  2. 	avalon.ready(function(){//等页面加载完毕再执行avalon代码
  3. 		avalon.define({
  4. 			$id:"AAA",
  5. 			name:"liger",
  6. 			color:"green"
  7. 		});
  8. 		avalon.define({
  9. 			$id:"BBB",
  10. 			name:"sphinx",
  11. 			color:"red"
  12. 		})
  13. 		avalon.define({
  14. 			$id:"CCC",
  15. 			name:"dragon"
  16. 		})
  17. 		avalon.scan();//扫描html将插值表达式转化为正常的浏览器html代码段
  18. 	})
  19. </script>
  20. </head>
  21. <body>
  22. 	<div ms-controller="AAA">
  23. 		<div>{{name}}:{{color}}</div>
  24. 		<div ms-controller="BBB">
  25. 			<div>{{name}}:{{color}}</div>
  26. 			<div ms-controller="CCC">
  27. 				<div>{{name}}:{{color}}</div><!-- 向上继承color的值 -->
  28. 			</div>
  29. 		</div>
  30. 	</div>
  31. </body>
输出：

    2、ms-important 不可互相嵌套的作用域，不会向上查找ViewModel属性
  1. <script type="text/javascript">
  2. 	avalon.ready(function(){//等页面加载完毕再执行avalon代码
  3. 		avalon.define({
  4. 			$id:"CCC",
  5. 			name:"dragon",
  6.             color:"red"
  7. 		})
  8. 		avalon.define({
  9. 			$id:"DDD",
  10. 			name:"sorice"
  11. 		});
  12. 		avalon.scan();//扫描html将插值表达式转化为正常的浏览器html代码段
  13. 	})
  14. </script>
  15. </head>
  16. <body>
  17. 	<div ms-controller="CCC">
  18. 		<div>{{name}}:{{color}}</div><!-- 向上继承color的值 -->
  19. 			<div ms-important="DDD"><!-- 不会向上查到ViewMolde属性 -->
  20. 				<div>{{name}}:{{color}}</div>
  21. 			</div>
  22. 	</div>
  23. </body>
输出：

    3、ms-skip 不应用任何ViewModel属性的作用域，直接输出插值表达式，不会输出插值表达式的值
  1. <script type="text/javascript">
  2. 	avalon.ready(function(){//等页面加载完毕再执行avalon代码
  3. 		avalon.define({
  4. 			$id:"DDD",
  5. 			name:"sorice"
  6. 		});
  7. 		avalon.define({
  8. 			$id:"EEE",
  9. 			name:"static",
  10. 			color:"reads"
  11. 		})
  12. 		avalon.scan();//扫描html将插值表达式转化为正常的浏览器html代码段
  13. 	})
  14. </script>
  15. </head>
  16. <body>
  17. 	<div ms-skip="EEE"><!-- 直接输出插值表达式，不会输出插值表达式的值,也不会继承 -->
  18. 		<div>{{name}}:{{color}}</div>
  19. 	</div>
  20. </body>





posted @ 2015-04-25 12:27  静文  阅读(223)  评论(0)    收藏  举报