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

avalon.js的循环操作在表格中的应用的更多相关文章

  1. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

  2. [JS&Jquery]实现页面表格中相同内容的行或列合并

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak<script type=&qu ...

  3. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  4. js通过行列获取表格中input的值

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  5. (转)用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

  6. js如何实现动态的在表格中添加和删除行?(两种方法)

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  7. js如何实现动态在表格中添加标题和去掉标题?

    js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...

  8. Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  9. MVVM大比拼之avalon.js源码精析

    简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...

随机推荐

  1. [转]让你的网页文本框增加光晕效果与提示,水印(类似QQ2011)

    本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html 让你的网页文本框增加光晕效果(类似QQ2011) 我们 ...

  2. linux_api之文件属性

    本篇索引:1.引言2.文件类型3.获取文件属性的函数,stat.fstat.lstat4.超级用户(root用户)和普通用户5.进程与用户ID6.文件权限的检查7.新创建的的文件和目录的所有权8.ac ...

  3. .vimrc的配置

    set nocompatible set encoding=utf-8 set fileencodings=utf-8,chinese set tabstop=4 set cindent shiftw ...

  4. GitKraken使用教程-基础部分(6)

    4) 放弃本次文件的改动 有些情况下,由于更改代码造成了编译无法通过等错误时,想要放弃这次对文件的修改,将文件还原成上一次提交后的状态,一种简单的恢复文件的方法就是,在Unstaged Files 列 ...

  5. SSL、数字签名、CA 工作原理

    SSL.数字签名.CA 工作原理 对称加密和非对称加密介绍和区别 什么是对称加密技术?   对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥,即加密密钥也可以用作解密密钥,这种方 ...

  6. jsp---tomcat===》》内置对象

    1.内置对象:    request: 方法:getParameter("txtName"):获取和页面上的name属性对象的value值       返回String       ...

  7. spring mvc 与Struts的认识

    首先,纠正一个概念上的错误.ssh一般意义上是指 struts,spring framework以及hibernate.这三个框架作用是不一样的.hibernate主要是用于持久层,struts主要是 ...

  8. Elmah 数据库脚本

    /* 错误管理工具 SQL代码 */ CREATE TABLE dbo.ELMAH_Error ( ErrorId UNIQUEIDENTIFIER NOT NULL, Application NVA ...

  9. 【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

    目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB.由于网站会有文章发布,因此需要有评论功能.评论功能也可以自己开发,但由于现在社会化评论插件很多, ...

  10. ScrollView监听滑动到顶部和底部的方法

    不需要监听滑动位置,只需要重写ScrollView的onOverScrolled和stopNestedScroll方法就可以了 public class ReadScrollView extends ...