BackboneJS вложенное изображение не рендеринга

Question

I have backbonejs form внутри лайтбокс с html<select> as child view. Для select<option> данных Я загрузка с сервера и у меня есть отдельная модель и коллекция для этого select

<select name="organization" id="organization" class="main__form--select main__form--select--js"> 
    <option value="no">Organizations not found, Please add one</option> 
</select> 

модели для варианта (optionModel)

return Backbone.Model.extend({ 
    defaults : { 
     "name" : 'KFC', 
     "email" : 'info@kfc.com', 
     "image" : '/kfc.jpg', 
     "descrption" : 'Lorem Ipsum' 
    } 
}); 

Это вид для модели

return Backbone.View.extend({  
    model : optionModel, 
    template : _.template(template), 
    render : function() { 
     this.$el.html(this.template(this.model.attributes));  
     return this; 
    } 
}); 

Это набор опций

return Backbone.Collection.extend({ 
    model : optionModel, 
    getQuery : function(){ 
     //all my query codes 
    } 
}); 

Опция коллекции просмотр render() код

this.collection.each(function (optionModel) { 
    // inserting each options view to an array 
    _this._optionsViewArray.push(
     new OptionView({ 
      model: optionModel 
     }).render().el 
    ); 
}); 
//inserting array to collection view container 
_this.$el.html(_this._optionsViewArray); 
return this; 

Моего вида Parent (вид формы) я создаю после визуализации функции с подчеркиванием _.wrap и внутри этой функции

//<select> 
var _selector = this.$el.find('#organization'); 

optionsView = new OptionsCollectionView({ 
    collection : optionsCollection, 
    $el: _selector 
}); 
optionsCollection.getQuery(); 
optionsView.render(); 

Но форма будет ЗАГРУЗКОЙ отлично и Опция коллекции запросов успешно, но ничего не меняется на <select> html, это не обновление.

Answer 1

Предполагая, что getQuery() делает асинхронный запрос (либо с помощью JQuery или Collection.fetch()), проблема (или, по меньшей мере, одна проблема) является то, что вы звоните optionsView.render() в ближайшее время, прежде чем результаты запроса возвращаются.

Вы могли бы бросить в произвольной 5 второй тайм-аут, чтобы убедиться, что это проблема, как это: setTimeout(function() { optionsView.render(); }, 5 * 1000);, но правильный способ сделать это, чтобы позвонить визуализации из функции JQuery done обработчика ($.ajax({done: function() { ... }})) или (лучше) а Магистраль sync обработчик события (этот вызов будет вызван только в том случае, если вы сделали запрос через базовую коллекцию fetch()): optionsCollection.on('sync', function() { ... });

Answer 2

Вы, например, неполны. Однако, учитывая, что выборки обычно асинхронны в Backbone и jQuery, это самая очевидная проблема, так как optionsView.render будет работать до того, как optionsCollection имеет возможность полностью загрузить коллекцию. Вы можете исправить это путем прослушивания события обновления коллекции:

optionsView = new OptionsCollectionView({ 
    collection : optionsCollection, 
    $el: _selector 
}); 
optionsView.listenTo(optionsCollection, 'update', optionsView.render); 
optionsCollection.getQuery(); 

Вы можете слушать sync события вместо этого, но слушать update означает, что локальные изменения в коллекцию также будут вызывать обновление вашего взгляда.

Существует также проблема с вашей функцией рендеринга, поскольку вы передаете массив элементов html в функцию jQuery html.

render: function() { 

    var $el = this.$el; 

    $el.empty(); 

    this.collection.each(function (optionModel) { 

     var view = new OptionView({ model: optionModel }); 

     $el.append(view.render().$el); 

    }); 

    return this; 

} 

Однако вы можете быть лучше использовать стандартную схему сбора вида, или что-то вроде Backbone.CollectionView - http://rotundasoftware.github.io/backbone.collectionView/