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

 红昊子楽楽七_358 发布于 2022-11-18 01:24

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

{{ htl.name }}


{{ @hot.videolist|json }}

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正常

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)
    2022-11-18 01:54 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有