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

推荐阅读