某些情况下 render/show() 死循环

[lizzie]

在 autocomplete 组件下, 实例化为:

    var ac = new AutoComplete({
        trigger: '#acTrigger4',
        template: $('#acTrigger4-template').html(),
        dataSource: ['abc', 'abd', 'abe', 'acd'],
        data: [],   // 为空数组
        inputValue: []   // 为空数组
    }).render();

出现错误如下:

Uncaught RangeError: Maximum call stack size exceeded

原因是以下几行代码:

1. autocomplete 在 onRenderData时有以下逻辑:

if ($.trim(this.$('[data-role=items]').text())) {
                this.show();
            } else {
                this.hide();
            }

https://github.com/aralejs/autocomplete/blob/1.2.0/src/autocomplete.js#L200

即, 当实例render()后, data/inputValue 为 [], 会执行 widget 的 _renderAndBindAttrs(), 并执行 autocomplete 的_onRenderData, 在执行到 上述代码后, 碰到 text() 不为空的时候, 执行 this.show(), 之后, overlay 的 show, 因为 此时 this.rendered 为false, 所以再次执行 this.render(), 导致循环.

建议是:

将 widget的 render() 中, this._renderAndBindAttrs() 和 this.rendered = true 换下位置.

https://github.com/aralejs/widget/blob/master/src/widget.js#L241