javascript - 选择 : Setting Default Value in onInitialize with setValue

Question

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

我知道还有其他方法可以initializing Selectize with a default value我可以试试；但是，我很好奇为什么要调用 setValue里面onInitialize对我不起作用，因为我在运行此代码时收到任何错误消息。

我将所有这些 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

将一些console.logs 放入Selectize.js 后，我发现在触发initialize 事件时ajax 数据还没有导入。我最终找到了使用 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);
            });
        }
    });

};

...