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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）