javascript - 为什么我的avalon ms-for 只循环一个？

Question

传送门：https://jsfiddle.net/chexian/...

<p ms-controller="index">    
    <p class="col-md-2" ms-for="htl in @hot.videolist" >
        <pre>{{ htl.name }}</pre>            
    </p>
    <hr>
    <pre>{{ @hot.videolist|json }}</pre>            
</p>

var vm = avalon.define({
    $id: 'index',
    hot: {
        "videolist": [{
            "name": "",                
            "desc": {
                "name": ""
            }
        }],
        "adsm": [{
            "name": "",
            "desc": {
                "read": "0",
                "answer": "0"
            }
        }]
    }
});

setTimeout(function(){ // 模拟 ajax
    vm.hot = {
        "videolist": [
            {
                "name": "名称1",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称2",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称3",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称4",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称5",                
                "desc": {
                    "name": "lopo"
                }
            }
        ],
        "adsm": [
                {
                    "name": "名称",
                    "desc": {
                        "read": "1000",
                        "answer": "50"
                    }
                },{
                    "name": "名称",
                    "desc": {
                        "read": "1000",
                        "answer": "50"
                    }
                },{
                    "name": "名称",
                    "desc": {
                        "read": "1000",
                        "answer": "50"
                    }
                }
            ]
    }
},100)

结果：

---

如果把 hot 的 adsm 去掉，可以正常。
请问，为什么会这样子？ 如果我要保留这个 adsm 需要怎么改？

---

补充： 这个问题在2.1.6之后才有的， 2.1.5正常

Answer 1

直接对数组变量进行赋值操作而导致的的变量变化 avalon未必能监控到，建议采用官方指定的方法对数组对象操作。这里将官方文档提到方法摘录于下：

pop, shift, unshift, push, splice，sort, revert。其次添加了四个移除⽅法，remove, removeAt, removeAll, clear， 及ensure，pushArray，set⽅法。

1. pushArray(el), 要求传⼊⼀数组，然后将它⾥⾯的元素全部添加到当前数组的末端。

2. remove(el), 要求传⼊⼀元素，通过全等于⽐较进⾏移除。

3. removeAt(index), 要求传⼊⼀数字，会移除对应位置的元素。

4. removeAll(arrayOrFunction), 有三种⽤法，如果是⼀个函数，则过滤⽐较后得到真值的元素， 如果是⼀数组，则将此数组中与原数组相等于的元素全部移除；如果没有任何参数，则全部清空。

5. clear()，相当于removeAll()的第三种⽅法，清空数组的所有元素。由于需要同步视图的缘故，不能通过vm.array.length = 0的⽅法来清空元素。

6. ensure(el)，只有当数组不存在此元素时，才添加此元素。

7. set(index, el)，⽤于更新某⼀索引位置中的元素，因为简单数组元素的数组，是不会转换它的元素。

根据这些方法，可以改写ajax提交中的方法如下：

setTimeout(function(){ // 模拟 ajax
    vm.hot.videolist.clear()
    vm.hot.videolist.pushArray([
            {
                "name": "名称1",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称2",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称3",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称4",                
                "desc": {
                    "name": "lopo"
                }
            },{
                "name": "名称5",                
                "desc": {
                    "name": "lopo"
                }
            }
    ])
    vm.hot.adsm.clear();
    vm.hot.adsm.pushArray([
            {
                "name": "名称",
                "desc": {
                    "read": "1000",
                    "answer": "50"
                }
            },{
                "name": "名称",
                "desc": {
                    "read": "1000",
                    "answer": "50"
                }
            },{
                "name": "名称",
                "desc": {
                    "read": "1000",
                    "answer": "50"
                }
            }
        ])
},1000)