Question

I have a two views:
   1 LeftView (maximized when RightView is minimized & vice versa)
   2 RightView (containing)
      - collection of 
         - RightItemView (rendering RightItemModel)

When RightView is maximized and the user clicks a RightItemView, I want to maximize LeftView and display something according to the data from the clicked RightItemView.

What’s the proper way to wire them?

Answer 1

I would recommend using the Backbone.Events module:

http://backbonejs.org/#Events

Basically, this line is all it takes to create your event dispatcher:

var dispatcher = _.clone(Backbone.Events);

Then all of your views can trigger/listen for events using the global dispatcher.

So, in RightItemView you would do something like this in the click event:

dispatcher.trigger('rightItemClick', data); // data is whatever you need the LeftView to know

Then, in LeftView’s initialize function, you can listen for the event and call your relevant function:

dispatcher.on('rightItemClick', this.maximizeAndDisplayData);

Assuming your LeftView would have a function like so:

maximizeAndDisplayData: function(data) {
    // do whatever you need to here
    // data is what you passed with the event
}