avalon.js的数组、对象相关方法整理
avalon.js是司徒正美老师开发的mvvm框架,这里整理出数组与对象的相关使用方法,实践版本:avalon.js 1.45
数组循环ms-repeat,ms-each
ms-repeat,ms-each都可循环数组,区别是 ms-each指令用在父元素上
arrayData:['JavaScript','PHP','Java']
<!--两者渲染的dom结果是一样的-->
<ul>
<li ms-repeat="arrayData"><{{el}}</li>
</ul>
<ul ms-each="arrayData">
<li><{{el}}</li>
</ul>
循环显示数组元素时可用的变量
*
: *
号表示 ms-repeat-*
中*
表示的英文字符串,如未设置,默认是el
。
$index
: number类型,表示当前循环的元素对应的索引值。
$first
: bool类型,表示当前循环的元素是否为数组的第一个元素。
$last
: bool类型,表示当前循环的元素是否为数组的最后一个元素。
$remove
: Function,用于从数组中删除当前循环,例子:ms-click($remove),单击后直接清除。
$outer
: Object,用于内层循环访问外层循环的变量。
对象循环ms-repeat,ms-with
ms-repeat,ms-with都可循对象,区别是 ms-with指令用在父元素上
objData:{
name:'ming',
age:20,
}
<ul>
<li ms-repeat="objData">{{$key}}--{{$val}}</li>
</ul>
<ul ms-with="objData">
<li>{{$key}}--{{$val}}</li>
</ul>
循环显示对象时可用的变量
$key
: string类型,当前循环的键名。
$val
: any类型,当前循环的键值。
$outer
: 用于内层循环访问外层循环的变量。
Avalon数组的使用方法和普通JavaScript数组没有什么区别,Avalon对数组的一些方法进行了重写,使得它们可以被监控,如 pop, shift, unshift, push, splice,sort, revert。并添加了四个移除方法,remove, removeAt, removeAll, clear, 及ensure,pushArray, size,set方法。
pushArray(el)
, 要求传入一数组,然后将它里面的元素全部到当前数组的末端。
remove(el)
, 要求传入一元素,通过全等于比较进行移除。
removeAt(index)
, 要求传入一数字,会移除对应位置的元素。
removeAll(arrayOrFunction)
, 有三种用法,如果是一个函数,则过滤比较后得到真值的元素, 如果是一数组,则将此数组中与原数组相等于的元素全部移除;如果没有任何参数,则全部清空。
clear()
,相当于removeAll()的第三种方法,清空数组的所有元素。由于需要同步视图的缘故,不能通过vm.array.length = 0的方法来清空元素。
ensure(el)
,只有当数组不存在此元素时,只添加此元素。
size()
,返回数组的长度。由于length属性是固有属性,无法hack,也就无法实现双向绑定,因此请用它来代替length。
set(index, el)
,用于更新某一索引位置中的元素,因为简单数组元素的数组,是不会转换它的元素。
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/2615/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论