獲取新集合時更新集合視圖

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); 
    } 
}); 

這種方法的一個好處就是很容易有幾件事情可以在區域變化的情況下聆聽，而不必緊密結合一切。