Selectize：使用 setValue 在 onInitialize 中设置默认值

Question

我有一个 Web 应用程序，在页面上初始化了多个 Selectize 对象。我试图让每个实例在页面加载时根据查询字符串加载一个默认值，其中?<obj.name>=<KeywordID>. 所有已序列化的 URL 参数都是字典调用that.urlParams。

我知道还有其他方法可以使用我可以尝试的默认值初始化 Selectize；但是，我很好奇为什么调用setValueinsideonInitialize对我不起作用，因为我在运行此代码时收到任何错误消息。

我将所有这些 JavaScript 与 Browserify 捆绑在一起，但我认为这不会导致这个问题。

在调试方面，我尝试登录this到里面的控制台onInititalize，发现setValue在Function.prototype属性上一级，该options属性充满了来自 的数据load，里面那些对象的键options对应于KeywordID。但是当我登录getValue(val)到控制台时，我得到一个空字符串。有没有办法让这个工作或者我忽略了一些关于 Selectize 或 JavaScript 的东西？

module.exports = function() {    
    var that = this;

    ...

    this.selectize = $(this).container.selectize({
        valueField: 'KeywordID',  // an integer value
        create: false,
        labelField: 'Name',
        searchField: 'Name',
        preload: true,
        allowEmptyOptions: true,
        closeAfterSelect: true,
        maxItems: 1,
        render: {
           option: function(item) {
                return that.template(item);
            },
        },
        onInitialize: function() {
            var val = parseInt(that.urlParams[that.name], 10);  // e.g. 5
            this.setValue(val);
        },
        load: function(query, callback) {
            $.ajax({
                url: that.url,
                type: 'GET',
                error: callback,
                success: callback
            })
        }
    });

};

...

Answer 1

在向 Selectize.js 中添加一些内容后console.logs，我发现当触发初始化事件时，ajax 数据尚未导入。我最终找到了一种在加载数据后使用 fire 的jQuery.when()解决方案，但我仍然希望能找到一个单一功能只做一件事的解决方案。setValue

module.exports = function() {    
    var that = this;

    ...

    this.selectize = $(this).container.selectize({
        valueField: 'KeywordID',  // an integer value
        create: false,
        labelField: 'Name',
        searchField: 'Name',
        preload: true,
        allowEmptyOptions: true,
        closeAfterSelect: true,
        maxItems: 1,
        render: {
           option: function(item) {
                return that.template(item);
            },
        },
        load: function(query, callback) {
            var self = this;
            $.when( $.ajax({
                url: that.url,
                type: 'GET',
                error: callback,
                success: callback
            }) ).then(function() {
                var val = parseInt(that.urlParams[that.name], 10);  // e.g. 5
                self.setValue(val);
            });
        }
    });

};

...