zoukankan      html  css  js  c++  java
  • 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赋值,表格就出来了。


  • 相关阅读:
    Wannafly #4 F 线路规划
    PKUWC2018 随机算法
    noip模拟赛
    php 正则判断是否是手机号码 最新
    Onethink上传服务器后登录不了的问题
    【php中的curl】php中curl的详细解说
    50种网站引流量方式
    mysql ERROR 1045 (28000): 错误解决办法
    织梦DEDE分类信息实现联动筛选(支持多条件多级选项)解决方案
    dedecms新增联动类别后的使用方法
  • 原文地址:https://www.cnblogs.com/embraceU/p/9235322.html
Copyright © 2011-2022 走看看