avalon 对象、对象数组、数组基本操作

界面

    
     
{
   {$key}}-->{
   {$val}}
    
改变对象
    
     
{
   {el}}
    
改变数组
    
     
{
   {el.aaa}}-->{
   {el.bbb}}-->{
   {el.ccc}}
    
改变对象数组

js操作逻辑

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;	}	});

效果：

avalon 数组升、降序

界面

{
   {el}}updown
    
     
      
       
name
       
size
       
date
      
      
       
{
   {el.name}}
       
{
   {el.size}}
       
{
   {el.date}}
      
     
    

js代码逻辑

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[v]?1:-1;			return t*ret  //当返回值为负数时，a排在b的后面，否则a排在b的前面。		});	});	avalon.scan();});
    

效果：

数组成员元素动态创建

界面

    
    
     请在下列输入框中输入内容：
     
     
     
     
    
现有{
   {todoList.size()}}项todoList!
    
     
{
   {el}}  x
    

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='';		}	}});

效果：