Display selected model from sidebar in information

Question

I'm working on a application which has sidebar on the right side. That displays collection. Each model of the collection has select behavior.

In the top center of the page I have one independant backbone view which acts like "info bar" and this view should update it's infomation when I select one of the views in the sidebar

How can I do it? I think that the each view in the sidebar should have "selected" event with model argument, and my question is how can I listen that change in my info bar view in Backbone.js???

Answer 1

This sounds like something that would be served well by an event aggregator pattern. Derick Bailey posted a really nice article on this matter which you can read here.

Event Aggregator Pattern

I extended my Backbone.View so that all views have the event aggregator object available to them like this.

Backbone.View.prototype.eventAggregator = _.extend({}, Backbone.Events);

Basically when your model view is selected, your view.eventAggregator will trigger some custom event.

sidebarView.eventAggregator.trigger('selected', this.model);

or something of this sort. With Backbone events, you can pass parameters through the trigger function to your event listener. In the above example I passed the model with the specific event.

In your main view, you'd be listening for this event.

mainView.eventAggregator.on('selected', myFunction, this);

myFunction: function(model) {
    // Some code to execute - model is available through param
}

It's a pretty useful pattern. Just don't forget to unbind the event when you close out your mainView. :-)