avalon2学习教程09循环操作

avalon2的循环指令的用法完全改变了。avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环。它们都是针对元素内容进行循环。后来又从angular那里抄来了ms-repeat, 这是循环元素内部的。

到avalon2,这三个指令合并成一个ms-for指令 ,用法与angular更相似,但没有$index, $last, $first, $middle.

如果想得到数组元素或对象的键值,在in关键字前指定一个新变量

{{el}}

如果要指定数组索引值或对象的键名,那么需要加一个小括号

{{el}}

我们可以用limitBy, filterBy, orderBy, selectBy过滤器生成新的循环体

{{el}}

如果用limitBy过滤器,那么数组的长度或对象的大小会变小,那我们现在就不
知道现在的长度,因此我们需要另一个变量引用新对象新数组

{{el}}::{{newArray.length}}

如果想实现之前的$fist, $last效果,那就需要用到js指令

这是我们第一次见到以注释节点存在的指令了。实质上,ms-if的值为false,创建的注释节点也算是一种注释指令。

而avalon2是没有像angular那样的ng-repeat-start, ng-repeat-end这样圈 定某个范围的辅助指令。换言之,不能像ms-repeat那样循环多个元素。

这时我们需要了解一下其内部机制。这个以元素属性存在的ms-for指令,会翻译成以注释节点存在的ms-for指令。

{{el}}::{{$index}}

等价于


{{el}}::{{$index}}

这有点复杂,但可以解决我们循环多个元素的问题


{{el.td1}}
{{el.td2}}

注意,avalon2的监控数组已经移除size()方法,由于内部使用了虚拟DOM,你直接使用@array.length就能得知道当前长度了。

avalon2也没有angular的track by机制,或像React那样强制使用key.这种为优化排序性能的方法,avalon内部帮你搞定,就不需要你多写什么了。



    
        
        
        
    
    
        
  • {{el}} --- {{$index}}

我们再来看一下如何循环二维数组



    
        
        
        
    
    
        
{{elem}} 它位于第{{$index}}

avalon2学习教程09循环操作_第1张图片
图上的这些注释节点,你用过angular也会发现类似的东西,这是方便框架对这些元素进行排序增删操作设计的。大家不要手动移除它们。

我们再看一个经典的例子,如何通过操作数组为列表添加或移除某一项!另,大家也可以对照这里看看avalon1是怎么实现的,你就明白avalon2在这方面的巨大优势与便利。




    
        ms-repeat
        
        
        
    
    
        

监控数组拥有以下方法,我们可以操作它们就能同步对应的区域

push, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, ensure, pushArray, sort, reverse, set
  • 数组的第{{$index+1}}个元素为{{el}}

对数组进行push操作,并回车

对数组进行unshift操作,并回车

对数组进行ensure操作,并回车
(只有数组不存在此元素才push进去)

对数组进行remove操作,并回车

对数组进行removeAt操作,并回车

当前数组的长度为{{@array.length}}


最后我们来一个表格的实用例子。之前avalon的大表格渲染时存在性能问题,现在大大得到改进了。



    
        TODO supply a title
        
        
        
        
    
    

        
{{el}}
{{td}}

你可能感兴趣的:(avalon2学习教程09循环操作)