Question

我有一个集合实例，然后是页面加载的集合视图实例，它从服务器填充一个区域和该区域的葡萄酒厂。

这是在我的主页上用jQuery ready函数调用的......

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

这种方法的一个很好的优点是很容易让几个东西听取区域变化，而不必紧紧地耦合所有东西。

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

1 个答案: