Backbone.js 获取新集合时更新集合视图

我有一个集合实例，然后在页面加载上有一个集合视图实例，它从服务器填充一个区域，并从该区域填充酿酒厂

这是在我的主页上用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;
    }

});

---

通常情况下，视图更像这样：

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

那么，无论是什么人想要了解地区变化，都可以收听全球事件总线：

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

您的

区域视图

可以通过

触发器

调用广播新区域：

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

---

这种方法的一个很好的优点是，不必将所有内容紧密地结合起来，就可以轻松地让多个内容监听区域的变化。

感谢您的帮助。我已经在自动完成中调用第二个块中的fetch。这是正确的。响应正在从服务器返回。我的印象是，当集合或模型更改时，视图会自动更新，因此我尝试将集合视图绑定到集合。因此，它识别的唯一集合是regionWineriesList实例，而当我创建新的newRegionWineriesList实例时，它不知道这一点？再次，谢谢你的解释。因此，在代码块2中，在获取新数据的地方，如何更新集合。我是否能够在不创建新实例的情况下执行此操作。我无法访问我函数中的

regionWineriesList

。它说它没有定义，那太好了。我张贴了一些以上的代码，让你可以看到我有什么。我可能完全错了。我还是个新手，所以我仍在努力掌握。非常感谢您的精彩解释。我将重构代码，让您知道我的想法。再次感谢你的帮助。抱歉耽搁了，周末有半米的雪需要我注意：）没必要道歉。你真的给了我很多思考和借鉴的机会。我每年至少花一个月的时间在韦尔教滑雪。当雪呼唤。。。