javascript - Select2:标记无法与自定义DataAdapter一起正常使用

我正在使用自定义dataAdapter，并且还尝试在Select2 jQuery插件中使用'tags'属性。但是在文档中找到的示例根本不起作用，只是简单地忽略了'tags'属性（这仅在使用自定义dataAdapter时发生，否则工作正常）。

因此，这是行不通的：

$(".js-example-tags").select2({
  tags: true
});

作为解决方案，我发现我们可以在dataAdapter中为Tag使用装饰器，它确实有效！问题是，它将始终有效。因此，如果我在HTML中有两个“选择”标签，并且我希望其中一个具有“ tags：true”，而另一个具有“ tags：false”，则由于此装饰器，它们都将启用标记。我试过设置'tags：false'，但是不起作用。

我在想一个解决方案是在dataAdapter中，为装饰器创建一个if语句，以决定是否应用。但是，问题在于，当创建第一个“选择”时，此特定代码仅执行一次。

所以我在想，如果我使用dataAdapter创建多个选择，那么所有选择将具有相同的装饰器。而且我认为拥有多个dataAdapters对我来说不是解决方案。

所以我的问题是，如果我有多个“选择”元素，如何为每个元素使用不同的装饰器？还使用相同的dataAdapter吗？

我也为此有一个JSFiddle：
Tags with dataAdapter

谢谢！

最佳答案

我们也碰到了这一点，而我却找不到任何有关如何“正确”实现这一点的东西。感觉有一个模式或挂钩，我想念的是select2应该提供here。

我想出了两种处理方法。

1.处理在调用select2之前添加装饰器的操作

(function ($) {
    var CustomDataAdapter = $.fn.select2.amd.require('select2/data/customDataAdapter');
    var Utils = $.fn.select2.amd.require('select2/utils');
    var Tags = $.fn.select2.amd.require('select2/data/tags');
    var MinimumInputLength = $.fn.select2.amd.require('select2/data/minimumInputLength');

    $.fn.mySelect2 = function(options) {
        if (!options.dataAdapter && options.customDataAdapterOptions) {
            options.dataAdapter = CustomDataAdapter;

            if (options.minimumInputLength > 0) {
                options.dataAdapter = Utils.Decorate(options.dataAdapter, MinimumInputLength);
            }

            if (options.tags) {
                options.dataAdapter = Utils.Decorate(options.dataAdapter, Tags);
            }
        }

        return this.select2(options);
    };
}(jQuery));

用法更改为：$('selector').mySelect2(options);

2.重写处理内置DataAdapters的Defaults.apply方法

(function() {
    var CustomDataAdapter = $.fn.select2.amd.require('select2/data/customDataAdapter');
    var Utils = $.fn.select2.amd.require('select2/utils');
    var Tags = $.fn.select2.amd.require('select2/data/tags');
    var MinimumInputLength = $.fn.select2.amd.require('select2/data/minimumInputLength');
    var baseApply = $.fn.select2.defaults.apply;

    $.fn.select2.defaults.apply = function (options) {
        if (!options.dataAdapter && options.customDataAdapterOptions) {
            options.dataAdapter = CustomDataAdapter;

            if (options.minimumInputLength > 0) {
                options.dataAdapter = Utils.Decorate(options.dataAdapter, MinimumInputLength);
            }

            if (options.tags) {
                options.dataAdapter = Utils.Decorate(options.dataAdapter, Tags);
            }
        }
        return baseApply.apply(this, arguments);
    };
}());

用法不变：$('selector').select2(options);

关于javascript - Select2:标记无法与自定义DataAdapter一起正常使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49171808/