【MVVM】- Avalon 数组操作

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

界面

<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操作逻辑

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 数组升、降序

界面

<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代码逻辑

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

效果：

数组成员元素动态创建

界面

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

效果：

来源：oschina

链接：https://my.oschina.net/u/4074151/blog/3016399

标签

ToDoList

avalon

mvvm