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

发布于 2022-09-04 02:12:14 字数 2558 浏览 17 评论 0

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

<div ms-controller="index">    
    <div class="col-md-2" ms-for="htl in @hot.videolist" >
        <pre>{{ htl.name }}</pre>            
    </div>
    <hr>
    <pre>{{ @hot.videolist|json }}</pre>            
</div>
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)

结果:
图片描述


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


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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

世态炎凉 2022-09-11 02:12:14

直接对数组变量进行赋值操作而导致的的变量变化 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)
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文