avalon2组件ms-for改变数组时不生效

发布于
2016-10-26

新手上路，请多包涵

1、问题：在使用avalon2.1.6写一个下拉选择组件，发现改变下拉数据源数组后ms-for不生效。

2、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div ms-controller="test">
        <ms-selector ms-widget="@config"></ms-selector>
    </div>
</body>
<script src="//cdn.bootcss.com/avalon.js/2.1.6/avalon.js"></script>
<script>
    var test_vm = avalon.define({
        $id:'test',
        config: {
            dataList: [
                {
                    id: 1,
                    name: '11111',
                },
                {
                    id: 2,
                    name: '22222',
                }
            ]
        }
    });
    var selector_vm = null;
    avalon.component('ms-selector', {
        template: '<div>\
                        <input type="text" \
                        ms-on-keypress="@keypressOn">\
                        <ul ms-if="@dataList.length > 0">\
                            <li ms-for="el in @dataList">{{el.name}}</li>\
                        </ul>\
                    </div>',
        defaults: {
            dataList: [],
            keypressOn: function(e) {
                if(e.charCode === 13){

                    this.dataList.push({id:7, name:'sfsfsf'})
                }
            },
            onInit: function(){
                console.log('onInit')
            },
            onReady: function(){
                selector_vm = this;
            }
        },
    })

</script>
</html>

3、在组件文本框中输入回车后向组件dataList数组中加入一个元素，第一次可以成功，再次操作就不会增加了，控制台看组件vm里的dataList元素已经增加，但是ms-for并没有生效渲染出来。

avalon

阅读 4.2k

3 个回答

得票最新

mike_580d671349874

133211

发布于
2016-10-26

重新scan()绑定渲染下试试呢

bigqiang

490116

发布于
2016-10-28

貌似avalon把‘id’属性名称当成数组元素唯一性标识了。可以将id属性名改成其他名称（比如did）,或将其属性值改成不重复值测试即可通过，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div ms-controller="test">
        <ms-selector ms-widget="@config"></ms-selector>
    </div>
</body>
<script src="//cdn.bootcss.com/avalon.js/2.1.6/avalon.js"></script>
<script>
    var test_vm = avalon.define({
        $id:'test',
        inc: 3,    //增加一个自变量，以名id值重复
        config: {
            dataList: [
                {
                    id: 1,
                    name: '11111',
                },
                {
                    id: 2,
                    name: '22222',
                }
            ]
        }
    });
    var selector_vm = null;
    avalon.component('ms-selector', {
        template: '<div>\
                        <input type="text" \
                        ms-on-keypress="@keypressOn">\
                        <ul ms-if="@dataList.length > 0">\
                            <li ms-for="el in @dataList">{{el.name}}</li>\
                        </ul>\
                    </div>',
        defaults: {
            dataList: [],
            keypressOn: function(e) {
                if(e.charCode === 13){

                    this.dataList.push({id:this.inc, name:'sfsfsf'})
                    this.inc++    //保证不重复
                }
            },
            onInit: function(){
                console.log('onInit')
            },
            onReady: function(){
                selector_vm = this;
            }
        },
    })

</script>
</html>

長风

发布于
2018-05-15

新手上路，请多包涵

avalon2有个特性叫做监控数组：
用vm.array.pushArray(arr)就可以更新了
图片描述

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进