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

一个JAVA开发,因为做的门户系统中,数据的展示加载的速度很影响使用效果,想到的是尽量少的请求后台,然后接触到了avalon,看介绍这是一个很轻很轻的MVVM架构的前端框架。
我用的是avalon2,使用过程中碰到的问题是想要用循环操作渲染页面的table,一开始看到了ms-repeat,但是页面一直出不来数据,控制台显示"ms-repeat has not registered !", google后发现关于ms-repeat的问题很少,想到可能是版本的问题。
原来在avalon2中,ms-repeat已经被ms-for代替,用法和angular比较相似
  1. <div ms-controller="list" class="block">
  2. <table width="100%" border="" cellspacing="0" cellpadding="0">
  3. <thead>
  4. <tr height="25">
  5. <th>价区</th>
  6. <th>本期</th>
  7. <th>上期</th>
  8. <th>环比</th>
  9.         <th>同比</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr height="25" ms-for="($index, el) in @infoList">
  14. <td><label>{{el.region}}</label></td>
  15. <td><label>{{el.current}}</label></td>
  16. <td><label>{{el.prior}}</label></td>
  17. <td><label>{{el.relative}}</label></td>
  18. <td><label>{{el.basis}}</label></td>
  19. </tr>
  20. </tbody>
  21. </table>
  22. </div>

Html中用到了ms-for指令,指明当前标签是一个循环体,el是循环的对象,@infoList是循环数组,可以用$index表示索引。

  1. var vm = avalon.define({
  2. $id:'list',
  3. infoList:[{
  4. region:"--",
  5. current:"--",
  6. prior:"--",
  7. relative:"--",
  8. basis:"--"
  9. }]
  10. });
  11. 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. php锁定文本框内容的方法

    有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...

  2. Unity C# ref与out

    ref和out 都是按地址传递的,使用后都将改变原来的数值.ref 方法参数关键字使方法引用传递到方法的同一个变量.当控制传递回调用方法时,在方法中对参数所做的任何更改都将反映在该变量中.若要使用 r ...

  3. wait/notify

    某面试题,实现一个生产者——消费者模型 题目:采用多线程技术,通过wait/notify,设计实现一个符合生产者和消费者问题的程序,对某一个对象(枪膛)进行操作,其最大容量是20颗子弹,生产者线程是一 ...

  4. if转switch

    if($a=="a") { echo "a"; } elseif ($a == "b") { echo "b"; } e ...

  5. 执行引入外部 jar 包的类的方法

    liunx 系统中,命令行中语法:(.后面是冒号:) java -cp .:third.jar MyClass windows 系统中命令行的语法:(.后面是分号;) java -cp .;third ...

  6. 超链接导致window.location.href失效的解决办法

    通常我们采用 window.location.href 执行页面间的跳转,比如下面的语句 window.location.href = 'https://www.baidu.com/'; 一般执行上面 ...

  7. html+css杂记

    overflow可设置超出后隐藏 子元素撑开父级元素:①父级元素宽度不固定,②父级元素设置为inline-block或者添加float: html中的中文在浏览器打开为乱码(已经写了<meta ...

  8. [持续更新] Linux基础的重要命令

    命令总结:100个左右 mkdir 方法一 [root@localhost ~]# mkdir /test && ls -ld /test 方法二 [root@localhost ~] ...

  9. <Android开源库 ~ 1> GitHub Android Libraries Top 100 简介

    转载自GitHub Android Libraries Top 100 简介 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitH ...

  10. Unity3d开发集成Google Admob广告增加收入

    在Unity游戏中植入广告是Unity 游戏产品增加收入的一种重要方式,常用的广告有谷歌Admob,百度ssp,腾讯广点通,unity公司的unityads等等,而使用的最多的应该属于谷歌Admob, ...