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>

来自为知笔记(Wiz)

时间: 2024-08-22 11:05:11

avalon视频学习笔记(一)的相关文章

avalon视频学习笔记(六)

一.数据缓存     1.绑定属性ms-data-* avalon的数据缓存功能与jquery的data()类似,但不同于jquery的是:avalon是直接将数据保存在元素节点上的data-*属性上. 在从data-*属性还原数据时,它会作简单的数据转换,再返回. 在ms-data绑定属性中,对象与数组是直接保存在元素节点上. <head> <meta charset="UTF-8"> <meta name="Generator" c

avalon视频学习笔记(七)

一.属性操作     DOM操作之属性操作: 1.类名操作<div class="active">    ms-class (1)ms-class a.ms-class="active"    默认写法,为元素添加active样式 b.ms-class="active:isOk"    isOK值为true,添加active,为false,删除active c.ms-class="width{{w}}:isOK" 

avalon视频学习笔记(五)

一.插入移除处理     1.绑定属性ms-if a.当ms-if的值为真(true)时,就将元素输出到页面里面. <div ms-controller="text"> <div ms-if="true"> 根据条件显示内容 </div> </div> <div avalonctrl="test"> <div> 根据条件显示内容 </div> </div&g

avalon视频学习笔记(四)

二.显示隐藏处理 含义:效果类似于jquery的toggle,如果它后面跟着的表达式为真值时则显示它所在的元素,为假值时则隐藏. <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta n

avalon视频学习笔记(三)

一.双向同步,双向绑定ms-duplex     含义:ms-duplex实现了双向数据绑定.双向绑定通俗说,除了负责将ViewModel中的应的值放到表单元素的value中,还对表单元素偷偷绑定一些事情,用于监听用户的输入从而自动刷新ViewModel. 使用场景一: 当元素为text.password.textaera时,要求prop为一个字符串,当我们改动它的内容时,avalon就会将此元素的value值赋给prop. <head> <meta charset="UTF-

avalon视频学习笔记(二)

一.数据填充 含义:将数据打印到页面上,通过绑定属性,将页面变成动态模版 1.插值表达式 {{prop}},{{prop | html}}定界符及自动配置 含义:{{prop}}是对某一文本节点的nodeValue进行修改,因此不会影响兄弟节点,{{prop}}只是表示这个地方可以被替换,在avalon中,它只在文本节点中有效,它不能替换属性节点里的名字,特性节点的名字必须以ms-开头. a.{{prop}} <head> <meta charset="UTF-8"&

韩顺平视频学习笔记-简易qq

1 package myclient; 2 3 import java.net.*; 4 import java.util.Date; 5 import java.text.SimpleDateFormat; 6 import java.awt.event.ActionEvent; 7 import java.awt.event.ActionListener; 8 import java.io.*; 9 import java.awt.*; 10 11 import javax.swing.*;

Spring视频学习笔记(二)

Spring视频学习笔记(二) XML配置里的Bean自动装配(三个来测试实现) /** * Person类 * */ public class Person { private String name; private Address address; private Car car; public String getName() { return name; } public void setName(String name) { this.name = name; } public Ad

老男孩视频第二部视频学习笔记(第二部)之一:命令(1)

命令:chkconfig  cat ls tail ln find wc tar cut grep egrep 一.如何过滤出已知当前目录下的所有一级目录 如何区分目录和文件:   1.利用颜色(这个依赖与CRT等工具)   2.利用 开头字母 · ls –l | grep ^d (正则表达式中一个字符 在[]中是非,在[]外面就是以什么开头) · ls –lF | grep / · ls –lF | grep /$  小结: 1.通过ls –l 以长格式显示文件属性,然后过滤以d开关的行,就是