How to make one idea of ​​other changes?

Question

Suppose you are creating an application for a music library.

You have one view with a list of genres, and the other with the contents of the selected genre. When a user clicks on a genre in a list, the content in another view should be updated accordingly.

What is the best way to do this so that there are minimal dependencies?

I have not found another place to listen to mouse clicks than the view that draws a separate genre. I can send an event from there, but what is the best way to get this event to update another view that draws the contents of the genre? Who should listen to this event, presentation of genre content or its collection?

EDIT: I create both views from the application router, and I managed to get it to work, creating views of each other, but this is not optimal, of course.

Answer 1

You can create a simple model for storing the state of the application, you do not need anything interesting, just a data bag that implements the usual methods of the Backbone event:

var AppState = Backbone.Model.extend({}); var app_state = new AppState(); 

Then, in the list of genres view, click events will be listened (as you already did) and set the current genre in the state-application model when someone changes it:

 var Genres = Backbone.View.extend({ //... choose: function(ev) { // This would be the click handler for the genre, // `.html()` is just for demonstration purposes, you'd // probably use a data attribute in real life. app_state.set({genre: $(ev.target).html() }); }, }); 

The view for a particular genre will listen to the "change:genre" events in the state-application model and respond as the genre changes:

 var Genre = Backbone.View.extend({ initialize: function() { _.bindAll(this, 'change_genre'); app_state.on('change:genre', this.change_genre); }, //... change_genre: function() { // Refill the genre display... } }); 

Demo: http://jsfiddle.net/ambiguous/mwBKm/1/

You can create models for any data that you need, and models are a convenient way to work with data events in Backbone. As an added bonus, this approach allows you to easily maintain the state of your application: just add the usual support for Backbone persistence to the AppState and off you go.

---

If you need a simple event bus to move events other than data, you can use the Backbone Events methods to create a simple event aggregator:

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

Then, if you have a global app namespace, you can say the following:

 app.events.on('some-event', some_function); 

and

 app.events.trigger('some-event', arg1, arg2, ...); 

Answer 2

The best way I've seen is the method suggested by Derick Bailey . In short, you can create an event aggregator that provides a centralized object for creating events that various views can subscribe to. The beauty of this solution is that it is very easy to implement because it uses the existing Backbone event system.