获取新集合时更新集合视图

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

这种方法的一个好处就是很容易有几件事情可以在区域变化的情况下聆听，而不必紧密结合一切。