将装饰器添加到Select2版本4.x中的数据适配器 [英] Add decorator to data adapter in Select2 version 4.x

问题描述

我想为我的自定义Select2 数据适配器支持MaximumInputLength装饰器.在我的自定义数据适配器中，Utils.Decorate()调用不执行任何操作.

I want to support the MaximumInputLength decorator for my custom Select2 Data Adapter. In my custom data adapter, the Utils.Decorate() call does not do anything.

查看此要点，我可以在初始化的同一位置调用Decorator函数select2()，但是这似乎很棘手，而不是DRY，因为我想初始化许多Select元素.

Looking at this gist, I could call the Decorator function in the same place where I initialize select2(), but that seems icky and not DRY, as I want to initialize many of these Select elements.

为了使MyDataAdapter的所有实例的输入最少，是否可以通过适配器本身装饰该适配器?有更好的方法吗?

In order to enable minimum input for ALL instances of MyDataAdapter, is it possible to decorate that adapter from the adapter itself? Is there a better way to do this?

我的select2()通话:

$('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;

});

推荐答案

您会在要点中注意到，他们的呼叫以装饰其适配器外观

You'll notice in the gist that their call to decorate their adapter looks like

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

，然后它们在初始化Select2时继续使用dropdownAdapter.这是因为Utils.Decorate 返回装饰的类，而不是就地装饰它.您还将注意到，它已经在装饰器和适配器创建后 进行.

And they later go on to use dropdownAdapter when initializing Select2. This is because Utils.Decorate returns the decorated class instead of decorating it in-place. You'll also notice that it does this after the decorator and adapters have already been created.

因此，不要在适配器的中间调用Utils.Decorate，而应在末尾调用它.无论是在返回完成的适配器时，还是在返回之前.

So instead of calling Utils.Decorate in the middle of your adapter, you should call it at the end. Either when you are returning the finished adapter, or right before you do.

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方法之后，您将覆盖它.

Before your major issue was that you were not using the returned class from Utils.Decorate. But the other issue that you would have hit is that it just wouldn't work, which was because you were overriding the query method after it had been decorated.

这篇关于将装饰器添加到Select2版本4.x中的数据适配器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！