avalon视频学习笔记(一)
一、禁用加载器![](//images0.cnblogs.com/blog/749687/201504/251232293282972.png)
![](//images0.cnblogs.com/blog/749687/201504/251232304683757.png)
![](//images0.cnblogs.com/blog/749687/201504/251232319061284.png)
![](//images0.cnblogs.com/blog/749687/201504/251232325004170.png)
方法一:在js文件中书写
avalon.config({
loader: false
})
方法二:在avalon源文件中添加
avalon.config({
loader: false
})
方法三:在源文件中删除amd加载器
![](http://images0.cnblogs.com/blog/749687/201504/251232293282972.png)
二、作用域绑定
含义:作用域范围圈定,在一个页面中需要形成多个模块,每个模块需要实现不同功能。
1、ms-controller 可以互相嵌套的作用域
含义:在页面上表现为一个特殊属性,其属性值为ViewModel的$id,表现将在此元素或者其子孙元素上圈定它的作用域范围,但是如果这些html存在它没有的属性,它可以向上查找上一级的ViewModel的属性。换言之,ms-controller可以互相嵌套。
<script type="text/javascript">
avalon.ready(function(){//等页面加载完毕再执行avalon代码
avalon.define({
$id:"AAA",
name:"liger",
color:"green"
});
avalon.define({
$id:"BBB",
name:"sphinx",
color:"red"
})
avalon.define({
$id:"CCC",
name:"dragon"
})
avalon.scan();//扫描html将插值表达式转化为正常的浏览器html代码段
})
</script>
</head>
<body>
<div ms-controller="AAA">
<div>{{name}}:{{color}}</div>
<div ms-controller="BBB">
<div>{{name}}:{{color}}</div>
<div ms-controller="CCC">
<div>{{name}}:{{color}}</div><!-- 向上继承color的值 -->
</div>
</div>
</div>
</body>
输出:
![](http://images0.cnblogs.com/blog/749687/201504/251232304683757.png)
2、ms-important 不可互相嵌套的作用域,不会向上查找ViewModel属性
<script type="text/javascript">
avalon.ready(function(){//等页面加载完毕再执行avalon代码
avalon.define({
$id:"CCC",
name:"dragon",
color:"red"
})
avalon.define({
$id:"DDD",
name:"sorice"
});
avalon.scan();//扫描html将插值表达式转化为正常的浏览器html代码段
})
</script>
</head>
<body>
<div ms-controller="CCC">
<div>{{name}}:{{color}}</div><!-- 向上继承color的值 -->
<div ms-important="DDD"><!-- 不会向上查到ViewMolde属性 -->
<div>{{name}}:{{color}}</div>
</div>
</div>
</body>
输出:
![](http://images0.cnblogs.com/blog/749687/201504/251232319061284.png)
3、ms-skip 不应用任何ViewModel属性的作用域,直接输出插值表达式,不会输出插值表达式的值
<script type="text/javascript">
avalon.ready(function(){//等页面加载完毕再执行avalon代码
avalon.define({
$id:"DDD",
name:"sorice"
});
avalon.define({
$id:"EEE",
name:"static",
color:"reads"
})
avalon.scan();//扫描html将插值表达式转化为正常的浏览器html代码段
})
</script>
</head>
<body>
<div ms-skip="EEE"><!-- 直接输出插值表达式,不会输出插值表达式的值,也不会继承 -->
<div>{{name}}:{{color}}</div>
</div>
</body>
![](http://images0.cnblogs.com/blog/749687/201504/251232325004170.png)
没有任何技术可言,只是用的东西比较多了,兜兜转转,浪费了很多时间,精力,只希望那些惨痛经历不会让我失去目标。谢谢那些帮助过我的人,谢谢那些否定了我的人,谢谢那些伤害了我的人。如果可以但愿再次相见,我定不敢忘记初心,而你是否还是如初?
《写给未来的女孩》
只恨少年年少时,
但愿佳丽字闺中。
长发及腰不能娶,
愿念心意依如初。
乙丑年挥斥方遒,
铺百里红妆可愿?