【MVVM】- Avalon 數組操做

時間 2019-11-13

標籤 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操做邏輯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

avalon 數組升、降序

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

效果：事件