avalon.js的数组、对象相关方法整理

东明兄 2021-08-25
0条评论 170 次浏览
东明兄 2021-08-250条评论 170 次浏览

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),用于更新某一索引位置中的元素,因为简单数组元素的数组,是不会转换它的元素。

发表评论

您的电子邮箱地址不会被公开。