Backbone JS: can one view trigger updates in other views?

Question

In my simple project I have 2 views - a line item view (Brand) and App. I have attached function that allows selecting multiple items:

 var BrandView = Backbone.View.extend({ ...some code...     toggle_select: function() {         this.model.selected = !this.model.selected;         if(this.model.selected) $(this.el).addClass('selected');         else $(this.el).removeClass('selected');         return this;     } });  var AppView = Backbone.View.extend({ ...some code...     delete_selected: function() {         _.each(Brands.selected(), function(model){              model.delete_selected();         });         return false;     }, }); 

Thing is, I want to know how many items are selected. In this setup selecting is NOT affecting the model and thus not firing any events. And from MVC concept I understand that views should not be directly talking to other views. So how can AppView know that something is being selected in BrandViews?

And more specifically, I AppView to know how many items were selected, so if more than 1 is selected, I show a menu for multiple selection.

Answer 1

You might want to have a read of this discussion of Backbone pub/sub events:

http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

I like to add it in as a global event mechanism:

Backbone.pubSub = _.extend({}, Backbone.Events); 

Then in one view you can trigger an event:

Backbone.pubSub.trigger('my-event', payload); 

And in another you can listen:

Backbone.pubSub.on('my-event', this.onMyEvent, this); 

Answer 2

I use what Addy Osmani calls the mediator pattern http://addyosmani.com/largescalejavascript/#mediatorpattern. The whole article is well worth a read.

Basically it is an event manager that allows you to subscribe to and publish events. So your AppView would subscript to an event, i.e. 'selected'. Then the BrandView would publish the 'selected' event.

The reason I like this is it allows you to send events between views, without the views being directly bound together.

For Example

var mediator = new Mediator(); //LOOK AT THE LINK FOR IMPLEMENTATION  var BrandView = Backbone.View.extend({     toggle_select: function() {         ...         mediator.publish('selected', any, data, you, want);         return this;     } });  var AppView = Backbone.View.extend({     initialize: function() {         mediator.subscribe('selected', this.delete_selected)     },      delete_selected: function(any, data, you, want) {         ... do something ...     }, }); 

This way your app view doesn't care if it is a BrandView or FooView that publishes the 'selected' event, only that the event occured. As a result, I find it a maintainable way to manage events between parts of you application, not just views.

If you read further about the 'Facade', you can create a nice permissions structure. This would allow you to say only an 'AppView' can subscribe to my 'selected' event. I find this helpful as it makes it very clear where the events are being used.