avalon.js的循环操作在表格中的应用

xiaoxiao2021-02-28  72

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

转载请注明原文地址: https://www.6miu.com/read-2500096.html

最新回复(0)