avalon component 嵌套报错？

Question

avalon版本 1.5.8

1. 问题描述

弹出层组件嵌套了下拉选择组件，下拉组件$init方法执行多次（2次及2次以上）,且avalon脚本报错

组件使用

<ms:dialog config="expressConfig" ms-visible="isShowCancel">
    <div slot="content" class="cancelDialog" ms-visible="isShowCancel">
        <div class="t">取消订单</div>
        <div class="label">请选择取消订单原因：</div>
        <div class="input">
            <div>
                <ms:select config="selectConfig"></ms:select>
            </div>
        </div>
        <div class="label">请留下你的宝贵建议：</div>
        <div class="textarea">
            <div>
                <textarea class="suggest" type="text" placeholder="留下你的宝贵建议"  ms-duplex="reason"></textarea>
            </div>
        </div>
        <div class="butt">
            <span class="back" ms-on-tap="hideCancelDialog">取消</span>
            <span class="submit" ms-on-tap="submitCancelDialog">确定</span>
        </div>
    </div>
</ms:dialog>

expressConfig 和 selectConfig 组件参数是在这个两个组件的父容器里定义的

弹出层组件定义

define(function(require, exports, module) {
    
    return function(avalon) {

        var tpl = [
            '<div class="dialog-blank" ms-on-tap="bgClick">',
                '<div class="dialog-blank-content" ms-on-tap="contentClick" ms-attr-style="cssLabel">',
                    '<div>[[content | html]]</div>',
                '</div>',
            '</div>'
        ].join('');

        avalon.component('ms:dialog', {
            $template: tpl,
            // $replace: 1, //是否替换容器
            content: '',
            css: {},
            cssLabel: '',
            $ready: function(vm, elem, vms) {
                var csss = [];
                for(var i in vm.css) {
                    if(vm.css.hasOwnProperty(i)) {
                        csss.push(i + ':' + vm.css[i]);
                    }
                }
                vm.cssLabel = csss.join(';');


                vm.bgClick = function() {
                    vm['hiddenCallback'] && vm['hiddenCallback']();
                };

                vm.contentClick = function($event) {
                    $event.stopPropagation();
                };

            },
            bgClick: avalon.noop,
            contentClick: avalon.noop
        });
    }
});

select组件定义

define(function(require, exports, module) {
    function isString(str) {
        return Object.prototype.toString.call(str) === '[object String]';
    }
    
    return function(avalon) {

        var tpl = [
            '<div class="select-mobile-container">',
                '<div class="select-mobile-label" ms-on-tap="showSelectClick">',
                    '<span ms-text="getText(defVal)"></span>',
                    '<i class="iconfont" ms-visible="!isShowSelect">&#xe62e;</i>',
                    '<i class="iconfont" ms-visible="isShowSelect">&#xe64e;</i>',
                '</div>',
                '<div class="select-mobile-flex" ms-on-tap="bgClick">',
                    '<div class="select-mobile-content" ms-on-tap="contentClick" ms-attr-style="cssLabel">',
                        '<div class="select-mobile-title" ms-if="title" ms-text="title"></div>',
                        '<ul>',
                            '<li ms-repeat="datas" ms-on-tap="selectClick(el, $index)" ms-class="selected: $index===selectIndex">',
                                '<span ms-text="getText(el, $index)"></span>',
                            '</li>',
                        '</ul>',
                    '</div>',
                '</div>',
            '</div>'
        ].join('');

        avalon.component('ms:select', {
            $template: tpl,
            $replace: 1,
            css: {},
            cssLabel: '',
            datas: [],           //默认选择数组
            defVal: '',          //默认值
            keyLabel: '',        //默认显示key
            selectIndex: -1,     //当前选中的index
            isShowSelect: false, //是否显示选择控件
            title: '',           //控件标题
            $init: function(vm) {
                    console.log(vm)
                vm.getText = function(el, index) {
                    if(isString(el)) {
                        return el;
                    } else if(vm.keyLabel && el.hasOwnProperty(vm.keyLabel)) {
                        return el[vm.keyLabel];
                    }
                };

                var i;
                for(i = 0; i < vm.datas.length; i++) {
                    if(isString(vm.datas[i]) && vm.datas[i] === vm.defVal) {
                        vm.selectIndex = i;
                        break;
                    } else if(vm.datas[i] === vm.defVal) {
                        vm.selectIndex = i;
                        break;
                    } else {
                        vm.selectIndex = -1;
                    }
                }

            },
            $ready: function(vm, elem, vms) {
                var csss = [];
                for(var i in vm.css) {
                    if(vm.css.hasOwnProperty(i)) {
                        csss.push(i + ':' + vm.css[i]);
                    }
                }
                vm.cssLabel = csss.join(';');

                vm.bgClick = function() {
                    vm.isShowSelect = false;
                    var flex = elem.querySelector('.select-mobile-flex');
                    flex.classList.remove('show');
                    setTimeout(function() {
                        flex.style.display = 'none';
                    }, 200);
                    vm['hiddenCallback'] && vm['hiddenCallback']();
                };

                vm.contentClick = function($event) {
                    $event.stopPropagation();
                };

                vm.selectClick = function(el, index) {
                    if(index !== vm.selectIndex) {
                        vm['selectCallback'] && vm['selectCallback'](el, index);
                        vm.selectIndex = index;
                        vm.defVal = el;
                        vm.bgClick();
                    }
                };

                vm.showSelectClick = function() {
                    vm.isShowSelect = true;
                    var flex = elem.querySelector('.select-mobile-flex');
                    flex.style.display = 'block';
                    setTimeout(function() {
                        flex.classList.add('show');
                    });
                };

            },
            bgClick: avalon.noop,
            contentClick: avalon.noop,
            getText: avalon.noop,
            selectClick: avalon.noop,
            showSelectClick: avalon.noop
        });
    }
});

报错信息

刚接触avalon，不知道是不是可以这么用？

Answer 1

写得我也看不懂，应该是组件的父节点为null

Answer 2

我挨个排除组件的属性 发现select组件的select组件的$replace属性注销了就好了