1、对css的指定属性进行更新
通过avalon中的ms-css-XXX属性，可以在ms-duplex更新vm对象值的的同时，实现对视图样式中指定属性的动态更新。
代码示例：
[html] view plain copy
<div class="panel1" ms-css-width="weight">
<input ms-duplex="weight"></input>
</div>
通过该段代码，实现通过input输入值的变化，动态改变div标签视图样式的width属性。
2、对标签所使用的css类进行更新
通过avalon中的ms-class属性，可以通过input等控件，动态改变指定标签所属的css类。从而使指定标签具有不同类所定义的不同css样式。
代码示例：
avalon代码：
[javascript] view plain copy
<script>
var model=avalon.define({
$id:"test",
style:"panel1",
change_class:function(e){
model.style=model.style==="panel1"?"panel2":"panel1"
}
})
html代码：
[html] view plain copy
<body ms-controller="test">
<div ms-class="{{style}}" ></div>
<button ms-click="change_class">点我改变类名</button>
</body>
以上代码实现的功能是通过点击button控件，改变div标签的类。点一下变成panel1类，再点一下变成panel2类
avalon是通过ms-repeat实现对一组数据的批量输出。这一组数据可以是一个数组，也可以是一个哈希（或叫对象）。我们先从数组说起吧。第二节就说，凡是定义在VM中的数组，如果没有以$开头或者没放在$skipArray数组里，都会转会监控数组。监控数组其实就是一个被重写了push、unshift、shift、pop、 splice、sort、reverse方法的普通数组。当然它也添加了其他一些方法，如set、 pushArray、remove、removeAt、removeAll、clear、ensure、 contains、size。我们只要 *** 作这些方法就能同步视图。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})
</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li>
</ul>
</body>
</html>
“Avalon”的意思是指：阿瓦隆，亚瑟王传说中的重要岛屿。
阿瓦隆是威尔士极乐世界的别称，另外被称之为“赐福岛”或“天佑之岛”。
阿瓦隆是亚瑟王最终的栖息地，是彼世中的极乐世界，那里由九位仙后守卫着。
阿瓦隆岛与爱尔兰神话中的提尔纳诺，希腊神话中赫斯珀里得斯的金苹果圣园以及犹太神话的极乐净土伊甸园极其相似。
名字由来：
1、阿瓦隆的名字很可能是来自凯尔特语 abal，意思是“苹果”（apple）。在不列颠传说中，该岛以漂亮的苹果而闻名。还有人认为它是凯尔特语“Annwyn” 的英语化，Annwyn 意指仙女之地或冥间。在亚瑟王传说中，阿瓦隆四周为沼泽和迷雾所笼罩，只能通过小船抵达。岛上由精灵守护，没有时间和岁月，一切都不会老去。
2、阿瓦隆也是传闻中耶稣随利马太的约瑟来到英国时所到之岛。在那里建立了英国第一个教堂。在这个传说中，阿瓦隆就是今天位于 格陵兰岛西南的格拉斯顿堡（Glastonbury）。在凯尔特语中，Glastonbury 又被称为“Ynis Witrin”，意即玻璃岛（The Isle of Glass）。一种有趣的解释是，古代的玻璃镜乃青铜打磨而成，而格拉斯顿堡青葱一碧，颜色具象，故有此名。
3、另一个可能的地点是圣米歇尔山（Mont St. Michel）。这个传闻中亚瑟与巨人激战的地方建立在沙丘之上。据说利马太的约瑟曾在那里经营马口铁生意。约瑟后来将圣杯带到英国，在萨默塞特（Somerset）的格拉斯顿堡（Glastonbury）建立了第一个教会。据说他也曾带着他的侄子耶稣前往过英国。而圣经上关于耶稣成圣之前的经历保持沉默。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）