界面数组
<body ms-controller="test"> <ul> <li ms-repeat="object">{{$key}}-->{{$val}}</li> </ul><br> <button ms-click="changeObject">改变对象</button><br> <ul> <li ms-repeat="array">{{el}}</li> </ul><br> <button ms-click="changeArray">改变数组</button><br> <ul> <li ms-repeat="objectArray"> {{el.aaa}}-->{{el.bbb}}-->{{el.ccc}} </li> </ul><br> <button ms-click="changeObjectArray">改变对象数组</button><br> </body>
js操做逻辑dom
vm=avalon.define({ $id:"test", object:{aaa:1111,bbb:2222,ccc:3333}, array:["AA","BB","CC"], objectArray:[{aaa:1111,bbb:2222,ccc:3333},{aaa:4444,bbb:5555,ccc:6666},{aaa:7777,bbb:8888,ccc:9999}], changeObject:function(){ //vm.object={aaa:444,bbb:555,ccc:666}; vm.object.aaa=555; }, //下标更改值 changeArray:function(){ vm.array.set(2,"DD"); }, changeObjectArray:function(){ vm.objectArray[0].aaa=555; } });
效果:3d
界面code
<body ms-controller="vm"> <p> <select ms-duplex="selected"> <option ms-repeat="options">{{el}}</option> </select> <select ms-duplex="trend"> <option value="1">up</option> <option value="-1">down</option> </select> </p> <table border="1px"> <tr><td>name</td><td>size</td><td>date</td></tr> <tr ms-repeat="data" ms-duplex="data"><td>{{el.name}}</td><td>{{el.size}}</td><td>{{el.date}}</td></tr> </table> </body>
js代码逻辑orm
avalon.ready(function(){ vm=avalon.define({ $id:"vm", options:["name","size","date"], data:[{name:"aaa",size:"1521",date:Date.now()+1}, {name:"bbb",size:"5252",date:Date.now()+10}, {name:"ccc",size:"1521",date:Date.now()-7}, {name:"ddd",size:"1251",date:Date.now()+15}], selected:"name", trend:1 }); //字段排序(先字段排序,而后在升降序排列):v表示当前元素的值 vm.$watch("selected",function(v){ var t=parseFloat(vm.trend); //获取升序降序的标志 vm.data.sort(function(a,b){ //对数据进行排序 var ret=a[v]>b[v]?1:-1; //默认升序排列 return t*ret; }); }); //按字段升降排序:sort返回值为负数代表a<b,a放在b后面,不然放在前面:a,b是数组中任意两个比较元素 vm.$watch("trend",function(t){ var v=vm.selected; var t=parseFloat(t); vm.data.sort(function(a,b){ var ret=a[v]>b[v]?1:-1; return t*ret //当返回值为负数时,a排在b的后面,不然a排在b的前面。 }); }); avalon.scan(); });
效果:对象
界面blog
<body ms-controller="vm"> <!-- 绑定form的submit事件 --> <form ms-on-submit="add" > <label>请在下列输入框中输入内容:</label><br> <!-- ms-duplex:双工绑定:avalon中的属性值和dom对象的元素的值绑定 --> <input type="text" ms-duplex="text"> <input type="submit" value="提交"> </form><br> <p ms-if="todoList.size()>0">现有<font color="red">{{todoList.size()}}</font>项todoList!</p> <ol> <li ms-repeat="todoList"> {{el}}<a href="#" ms-click="$remove" style="text-decoration:none;"> x</a> </li> </ol> </body>
js代码逻辑排序
var vm=avalon.define({ $id:"vm", text:'', todoList:[], add:function(e){ e.preventDefault(); if(vm.text.length>0){ vm.todoList.push(vm.text); vm.text=''; } } });
效果:事件