在 Select2 版本 4.x 中向数据适配器添加装饰器

我想支持MaximumInputLength我的自定义 Select2 的装饰器数据适配器 https://select2.github.io/options.html#dataAdapter。在我的自定义数据适配器中，Utils.Decorate()调用不执行任何操作。

看着这个要点 https://gist.github.com/timkelty/ae79d180acc9d3054e02，我可以在初始化的同一位置调用装饰器函数select2()，但这看起来很恶心而且不干，因为我想初始化许多这样的 Select 元素。

为了为 MyDataAdapter 的所有实例启用最小输入，是否可以从适配器本身装饰该适配器？有一个更好的方法吗？

My select2() call:

$('select').select2({
    dataAdapter: MyDataAdapter,
    minimumInputLength: 2
});

MyDataAdapter（无依赖性）：

define([...], function(Utils, MinimumInputLength, ArrayAdapter){

    function MyDataAdapter($element, options) {
        this.$element = $element;
        this.options = options;
        MyDataAdapter.__super__.constructor.call(this, $element, options);
    }

    Utils.Extend(MyDataAdapter, ArrayAdapter);
    Utils.Decorate(MyDataAdapter, MinimumInputLength); <-- does nothing

    MyDataAdapter.prototype.query = function(params, callback) {
        console.log('query!');
    };

    return MyDataAdapter;

});

你会注意到the gist https://gist.github.com/timkelty/ae79d180acc9d3054e02他们装饰适配器的调用看起来像

var dropdownAdapter = Utils.Decorate(
  Utils.Decorate(
    DropdownAdapter,
    DropdownSearch
  ),
  AttachContainer
);

他们后来继续使用dropdownAdapter初始化 Select2 时。这是因为Utils.Decorate returns装饰类而不是就地装饰它。你还会注意到它是这样做的after装饰器和适配器已经创建。

所以而不是打电话Utils.Decorate在适配器的中间，您应该在最后调用它。无论是在您归还完成的适配器时，还是在您归还之前。

define([...], function(Utils, MinimumInputLength, ArrayAdapter){    
    function MyDataAdapter($element, options) {
        this.$element = $element;
        this.options = options;
        MyDataAdapter.__super__.constructor.call(this, $element, options);
    }

    // Always extend after making the constructor
    Utils.Extend(MyDataAdapter, ArrayAdapter);

    MyDataAdapter.prototype.query = function(params, callback) {
        console.log('query!');
    };

    // Decorate after the adapter is built
    return Utils.Decorate(MyDataAdapter, MinimumInputLength);
});

在您的主要问题是您没有使用从返回的类之前Utils.Decorate。但是您会遇到的另一个问题是它不起作用，这是因为您覆盖了query装饰后的方法。