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>





原文地址:https://www.cnblogs.com/Zjingwen/p/4455733.html