首页 > 其他分享> > 07avalon - 监控数组与非监控属性

07avalon - 监控数组与非监控属性

2019-04-15 19:50:36 作者：互联网

监控数组

操作此数组的方法会同步视图的特殊数组，它是由VM中的数组自动转换而来。方便与ms-repeat, ms-each配合使用，能批量同步一大堆DOM节点。

监控数组的方法与普通数组没什么不同，它只是被重写了某一部分方法，如 pop, shift, unshift, push, splice，sort, revert。其次添加了四个移除方法，remove, removeAt, removeAll, clear，及ensure，pushArray，set方法。

pushArray(el), 要求传入一数组，然后将它里面的元素全部添加到当前数组的末端。
remove(el), 要求传入一元素，通过全等于比较进行移除。
removeAt(index), 要求传入一数字，会移除对应位置的元素。
removeAll(arrayOrFunction), 有三种用法，如果是一个函数，则过滤比较后得到真值的元素，如果是一数组，则将此数组中与原数组相等于的元素全部移除；如果没有任何参数，则全部清空。
clear()，相当于removeAll()的第三种方法，清空数组的所有元素。由于需要同步视图的缘故，不能通过vm.array.length = 0的方法来清空元素。
ensure(el)，只有当数组不存在此元素时，才添加此元素。
set(index, el)，用于更新某一索引位置中的元素，因为简单数组元素的数组，是不会转换它的元素。
toJSON()，用于取得数组的$model, 2.2.2新添加的方法

var vm = avalon.define({
   $id:'xxx',
   array: [1,2,3]
})
vm.array.push(4,5,6)
vm.array.pushArray([4,5,6])//这个比push方法好用
vm.array.clear()
vm.array.ensure(3) //[3]
vm.array.ensure(3) //[3]
vm.array.ensure(4) //[3,4]

注意,修改某个数组元素必须使用set方法. 如果是修改对象数组的某个元素的属性可以用 vm.array[1].prop = ‘newValue’

<body ms-controller="test">
    <div ms-for="el in @arr">
        {{el}}<button type="button" ms-click="@arr.remove(el)">点我删除该行</button>
    </div>
    <script>
    avalon.define({
        $id: 'test',
        arr: [1,2,3,4,5,6]
    })
    </script>
</body>

非监控属性

这包括框架添加的 $ id, $ events, $ model属性, $ fire, $ watch, $ render方法，及用户自己设置的以 $ 开头的属性，放在$skipArray数组中的属性，值为函数、各种DOM节点的属性，总之，改变它们的值不会产生同步视图的效果。

标签：el,与非,元素,vm,07avalon,ensure,数组,监控,array
来源： https://blog.csdn.net/qq_20042935/article/details/89318855