avalon.js的循環操做在表格中的應用

avalon.js的循環操做在表格中的應用

一個JAVA開發，由於作的門戶系統中，數據的展現加載的速度很影響使用效果，想到的是儘可能少的請求後臺，而後接觸到了avalon，看介紹這是一個很輕很輕的MVVM架構的前端框架。

我用的是avalon2，使用過程當中碰到的問題是想要用循環操做渲染頁面的table，一開始看到了ms-repeat，可是頁面一直出不來數據，控制檯顯示"ms-repeat has not registered !"， google後發現關於ms-repeat的問題不多，想到多是版本的問題。

原來在avalon2中，ms-repeat已經被ms-for代替，用法和angular比較類似

<div  ms-controller="list" class="block"> 
	<table width="100%" border="" cellspacing="0" cellpadding="0">
		<thead>
			<tr height="25">
				<th>價區</th>
				<th>本期</th>
				<th>上期</th>
				<th>環比</th>
			        <th>同比</th>
			</tr>
		</thead>
		<tbody>
			<tr height="25"  ms-for="($index, el) in @infoList">
				<td><label>{{el.region}}</label></td>
				<td><label>{{el.current}}</label></td>
				<td><label>{{el.prior}}</label></td>
				<td><label>{{el.relative}}</label></td>
				<td><label>{{el.basis}}</label></td>
			</tr>
		</tbody>
	</table>
</div>

Html中用到了ms-for指令，指明當前標籤是一個循環體，el是循環的對象，@infoList是循環數組，能夠用$index表示索引。

var vm = avalon.define({
	$id:'list',
	infoList:[{
		region:"--",
		current:"--",
		prior:"--",
		relative:"--",
		basis:"--"
	}]
});
avalon.scan(document.body);

ajax的回調中能夠對vm.infoList賦值，表格就出來了。