Обновление представления коллекции при получении новой коллекции

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

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