javascript - 从 jquery 插件样板代码调用函数

Question

我找到了不错的 jQuery 插件，它使用样板模板。一切正常，但我无法调用内部函数来获取所选项目。 该插件的结构如下:

    (function ($, window, document) {
    'use strict';

    // constructor
    var SearchableOptionList = function ($element, options) {
        this.$originalElement = $element;
        this.options = options;

        this.metadata = this.$originalElement.data('sol-options');
    };

    // plugin prototype
    SearchableOptionList.prototype = {

        DATA_KEY: 'sol-element',

        // default option values
        defaults: {            
            ... 
        },

        // initialize the plugin
        init: function () {
            this.config = $.extend(true, {}, this.defaults, this.options, this.metadata);

            ...

            return this;
        },

        //some functions
        ...

        selectAll: function () {
            ...
        },

        deselectAll: function () {
            ...
        },

        getSelection: function () {
            return this.$selection.find('input:checked');
        }
    };

    // jquery plugin boiler plate code
    SearchableOptionList.defaults = SearchableOptionList.prototype.defaults;
    window.SearchableOptionList = SearchableOptionList;

    $.fn.searchableOptionList = function (options) {
        var result = [];
        this.each(function () {
            var $this = $(this),
                $alreadyInitializedSol = $this.data(SearchableOptionList.prototype.DATA_KEY);

            if ($alreadyInitializedSol) {
                result.push($alreadyInitializedSol);
            } else {
                var newSol = new SearchableOptionList($this, options);
                result.push(newSol);

                setTimeout(function() {
                    newSol.init();
                }, 0);
            }
        });

        if (result.length === 1) {
            return result[0];
        }

        return result;
    };

}(jQuery, window, document));

完整代码可以在 GitHub 上找到.

我尝试调用 getSelection 函数，如下所示:

// initialize sol
    var s = $('#my-select').searchableOptionList({
        maxHeight: '150px',
        showSelectAll: true
    });

    s.selectAll();

我收到错误:

TypeError: this.config is undefined

是否可以使用此样板模板来调用函数？

您可以在 jsfiddle 上玩

Answer 1

我相信line 1031罪魁祸首是

        setTimeout(function() {
            newSol.init();
        }, 0);

由于 init 被延迟，因此当您立即调用它时，代码尚未准备好。最简单的解决方法是也推迟您的调用，但不能保证它会被初始化。

setTimeout(function(){s.selectAll()},1000);

更好的解决方案是使用插件的events初始化后 Hook 。

$('#my-select').searchableOptionList({
  maxHeight: '150px',
  events: {
    onInitialized: function() {
      this.selectAll();
    }
  }
});

fiddle