Обновление коллекции при сборе новой коллекции

Question

У меня есть экземпляр коллекции, а затем экземпляр экземпляра коллекции при загрузке страницы, который заполняет с сервера регион и винные заводы из этого региона.

Это вызывается на моей домашней странице в готовой функции JQuery ...

var regionWineriesList = new RegionWineriesList(); 
var regionWineriesListView = new RegionWineriesListView({collection: regionWineriesList, map: Map.map}); 
regionWineriesList.fetch({ 
    success: function(response) { 
     $('.wineries-scroll').prepend(regionWineriesListView.render().el); 
    } 
}); 

Это работает прекрасно.

У меня также есть автозаполнение, которое при щелчке делает выборку для нового набора данных. Он находится в функции findWineries().

var RegionsView = Backbone.View.extend({ 

el: 'body', 

initialize: function(options) { 
    this.region_input = $('input#RegionLocation'); 
    this.winery_input = $('input#WinerySearchHome'); 
}, 

events: { 
    'click input#RegionLocation': 'autoCompleteSetup', 
    'click .pulldown-arrow': 'autoCompleteSetup' 
}, 

autoCompleteSetup: function() { 
    var self = this; 
    this.options = {minLength: 0, source: this.collection.toJSON()}; 
    this.region_input.autocomplete(self.options); 
    this.region_input.autocomplete('search', ''); 
    this.region_input.autocomplete({ 
     select: function(event, ui) { 
      self.winery_input.val('Search By Winery Name'); 
      self.findWineries(ui.item.label); 
     } 
    }); 
}, 

findWineries: function(label) { 
    var newRegionWineriesList = new RegionWineriesList(); 
    newRegionWineriesList.fetch({ 
     data: {region: label}, 
     reset: true 
    }); 
} 

}); 

Это также работает с тем, что он извлекает новые данные с сервера.

Я не могу понять, как обновить представление после получения новых данных. Я попытался связать коллекцию с коллекцией, но ничего не происходит.

Вот модель, коллекция и коллекция. Я оставляю модельный вид. Пожалуйста, сообщите, если мне это нужно, и я отредактирую.

var RegionWinery = Backbone.Model.extend(); 

var RegionWineriesList = Backbone.Collection.extend({ 

    model: RegionWinery, 
    url: '/regions/regions_wineries.json', 
    parse: function(response){ 
     return response.wineries; 
    } 

}); 

var RegionWineriesListView = Backbone.View.extend({ 

    className: 'wineries', 

    initialize: function(options) { 
     _.bindAll(this, 'render'); 
     this.listenTo(this.collection, 'reset', this.render); 
     this.map = options.map; 
     this.render(); 
    }, 

    render: function() { 
     this.collection.each(function(winery) { 
      var marker_view = new MapMarkerView({model: winery, map: this.map }); 
      var regionWineriesView = new RegionWineriesView({model: winery, marker_view: marker_view}); 
      this.$el.append(regionWineriesView.render().el); 
     }, this); 

     return this; 
    } 

}); 

Answer 1

Обычно вид будет выглядеть следующим образом:

var RegionsView = Backbone.View.extend({ 
    //... 
    findWineries: function(label) { 
     this.collection.fetch({ 
      data: {region: label}, 
      reset: true 
     }); 
    } 
}); 

тогда все, что создает, что бы создать региональный список и все остальное заботилась бы слушать ту же коллекции:

var newRegionWineriesList = new RegionWineriesList(); 
var v = new RegionsView({ collection: newRegionWineriesList }); 
someOtherView.listenTo(newRegionWineriesList, 'reset', something_that_handles_the_reset); 

Лучшим способом было бы создать глобальную шину событий:

window.yourApp = window.yourApp || { }; 

yourApp.events = _({}).extend(Backbone.Events); 

Тогда все это, что хочет знать о смене региона может слушать глобальную шину событий:

this.listenTo(yourApp.events, 'new-region', function(region) { 
    // deal with the new region, this would usually be a method 
}); 

и ваш RegionsView может транслировать новый регион с trigger вызова:

this.region_input.autocomplete({ 
    select: function(event, ui) { 
     self.winery_input.val('Search By Winery Name'); 
     yourApp.events.trigger('new-region', ui.item.label); 
    } 
}); 

Одно из достоинств этого подхода состоит в том, что легко заставить несколько вещей прислушиваться к изменениям в регионе, не имея при этом плотной связи.