avalon ms-repeat avalon1
工作原因要用到avalon二次开发, 但是看了下以前的avalon版本是1,现在大多数都是2版本了吧,,所以很多文档不好找,但是大多数还是好用的
ms-repeat
循环当前赋值的,
ms-repeat:加载需要循环显示的子元素上:默认el
ms-repeat-item–>修改为item
ms-each:作用到需要循环子元素的父元素上
HTML正文:
<body ms-controller="test">
<p>数组遍历</p>
<!-- $index:下标
$last最后一个元素 -->
<ul>
<li ms-repeat-item="array">{{item}}---->{{$index}}</li>
</ul><br> <p>ms-each</p>
<ul ms-each="array">
<li>{{el}}<span ms-if="!$last">--></span></li>
</ul><br> <!-- $key:属性名 $val属性值 ms-with类似ms-each-->
<p>ms-repeat对象属性遍历</p>
<ul>
<li ms-repeat="objects">{{$key}}-->{{$val}}</li>
</ul><br> <p>ms-with对象属性遍历</p>
<ul ms-with="objects">
<li>{{$key}}-->{{$val}}</li>
</ul>
</body>
JavaScript操作代码:
var vm=avalon.define({
$id:"test",
array:[111,222,333],
objects:{aaa:"1111",bbb:"2222",ccc:"3333"}
});
效果:
有点要注意的是,ms-repeat似乎不能利用当前的键值进行判断,需要放到下一级
比如,下面这个,判断只显示第一个,这样是不行的
<img ms-repeat="lunlist" onerror="this.src='images/buy/x_02.png'" ms-src="el.image" ms-attr-id="$index" ms-if="$index==0" style="width: 100%;height: 210px;"/>
需要改为第二级判断
<div ms-repeat="lunlist">
<img onerror="this.src='images/buy/x_02.png'" ms-src="el.image" ms-attr-id="$index" ms-if="$index==0" style="width: 100%;height: 210px;"/>
</div>
当然 $last 判断也是一样 键值$index 是从0 开始的
avalon ms-repeat avalon1的更多相关文章
- avalon组件
如何做一个avalon组件 在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以 ...
- webpack 集成 jQuery 和 Avalon
webpack 系列 三:webpack 如何集成第三方js库 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webp ...
- 如何做一个avalon组件
在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以AMD形式组织,引入HTML ...
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...
- 前端MVVM框架avalon揭秘 - HTML编译器
MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离 所以出现了一大堆自定义的声明 ...
- 基于avalon1.4.x ----分页组件编写
avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...
- Repeat Number
Problem B: Repeat Number Time Limit: 1 Sec Memory Limit: 32 MB Description Definition: a+b = c, if ...
- avalon与双缓冲技术
avalon与双缓冲技术 avalon1.5一个重要技术升级是引进异步渲染.异步渲染在游戏界有一个更专业的名字,叫双缓冲.游戏界要刷新界面与我们刷新浏览器视图,面临的问题是一致的.视图是由许多存在套嵌 ...
- MVVM框架avalon在兼容旧式IE
迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页 迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...
随机推荐
- python函数(四)
一.函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pasc ...
- 牛客网Java刷题知识点之Java 集合框架的构成、集合框架中的迭代器Iterator、集合框架中的集合接口Collection(List和Set)、集合框架中的Map集合
不多说,直接上干货! 集合框架中包含了大量集合接口.这些接口的实现类和操作它们的算法. 集合容器因为内部的数据结构不同,有多种具体容器. 不断的向上抽取,就形成了集合框架. Map是一次添加一对元素. ...
- MySQL 8.0之后版本密码修改
MySQL刚刚安装完毕时 mysqld --initialize grep password /var/log/mysqld.log 获取临时密码 mysql -uroot -p 输入临时密码登录My ...
- MVC分页技术
这个是用的插件分页技术 前台引用和js <script type="text/javascript" src="/js/jquery-1.10.2.min.js&q ...
- Chrome浏览器正常,IE下界面却乱了
背景:项目实战中总会遇到一些小问题,IE特别多 Chrome浏览器页面正常,IE下界面就乱了 原因分析 1.首先想到的是代码有米有问题呢?主要指的是兼容性 2.兼容性没有问题,那我们打开IE的开发工具 ...
- 国内外著名B2C系统介绍兼比较【收藏版】
一.国内知名B2C系统 1.Shopex国内最大的电子商务系统,有各种辅助工具,php开发,免费但不开源,网店模板众多,较适合有淘宝店的卖家.网址:www.shopex.cn 2.ECshop免费且开 ...
- jQuery中的节点操作(二)
html代码如下 <p title="武汉长乐教育PHP系列教程" name="hello" class="blue"> < ...
- 【JavaScript】JavaScript赋值语句中的逻辑与&&和逻辑或||
在其他语言中,我们往往看到逻辑符号出现在判断语句当中,如 if(a||b){} 但在一些js相关的面试题或者书中,我们有时会看到逻辑与&&和逻辑或||符号出现在赋值语句或者返回语句中, ...
- 关于如何等待一个元素的出现而不用一些笨拙粗暴的time.sleep()方法
我相信这是一个非常大众化的需求,我们需要等待某一个元素的出现以此来让我们的脚本进入到下一个Step,这个等待方法最好能够设置超时时间,然后找到后迅速callback.我们也很幸运!如果你仔细看Sele ...
- ansible使用2-命令
并发与shell # bruce用户身份,-m指定模块名称,默认模块名command,all所有目标主机,也可以指定组名或者主机名 ansible all -m ping -u bruce # bru ...