Выделить: установить значение по умолчанию в onInitialize с помощью setValue

Question

У меня есть веб-приложение с несколькими объектами 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 был вызван. Я закончил поиск решения, используя 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); 
      }); 
     } 
    }); 

}; 

... 

Answer 2

Вам просто нужно добавить опцию перед установкой его в качестве значения, так как эта линия в addItem будет проверять для него: if (!self.options.hasOwnProperty(value)) return;

внутри onInitialize вы могли бы сделать:

var val = that.urlParams[that.name]; //It might work with parseInt, I haven't used integers in selectize options though, only strings. 
var opt = {id:val, text:val}; 
self.addOption(opt); 
self.setValue(opt.id);