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赋值，表格就出来了。