title: Event handling between views
body: <p>Ok I have a layout like the one in this pic:</p>
  
  <p><img src="https://i.stack.imgur.com/z0N4N.png" alt="Layout"></p>
  
  <p>The table in the upper part of the screen is made by:</p>
  
  <p><em>MessageListView</em></p>
  
  <pre><code>define(['backbone','collections/messages','views/message'], function(Backbone, MessageCollection, MessageView) {
      var MessageListView = Backbone.View.extend({
          el: '#messagesContainer', 
          initialize: function() {
  
              this.collection = new MessageCollection();
              this.collection.fetch({reset:true});
              this.listenTo( this.collection, 'reset', this.render );
  
              this.table = this.$el.find("table tbody");
              this.render();
          },
          render: function() {
              this.collection.each( function(message, index) {                
                  this.renderMessage(message, index);
              }, this);
          },
          renderMessage: function(message, index) {
              var view = new MessageView({
                  model:message,
                  className: (index % 2 == 0) ? "even" : "odd"    
              });
              this.table.append( view.render().el );
          }
      });
      return MessageListView;
  });
  </code></pre>
  
  <p><em>MessageView</em></p>
  
  <pre><code>define(['backbone','models/message'], function(Backbone, MessageCollection, MessageView) {
      var MessageView = Backbone.View.extend({
          template: _.template( $("#messageTemplate").html() ), 
          render: function() {
              this.setElement( this.template(this.model.toJSON()) );          
              return this;
          },
          events:{
              'click':'select'
          },
          select: function() {
             // WHAT TO DO HERE?
          }
      });
      return MessageView;
  });
  </code></pre>
  
  <p><em>AppView</em></p>
  
  <pre><code>define(['backbone','views/messages'], function(Backbone, MessageList) {
      var App = Backbone.View.extend({
          initialize: function() {
              new MessageList(); 
          }
      });
      return App;
  });
  </code></pre>
  
  <p>I will soon add a new view (maybe "PreviewView") in the lower part of the screen.</p>
  
  <p><strong>I want to make something happen inside the "PreviewView" when user clicks a row.</strong></p>
  
  <p>For example, it could be interesting to display other model's attributes (details, e.g.) inside the PreviewView.</p>
  
  <p>What is the best practice? </p>
  
  <ul>
  <li>holding a reference to PreviewView inside each MessageView ?</li>
  <li>triggering events inside select method, and listening to them using <em>on()</em> inside the preview view.</li>
  <li>using a transient "selected" attribute in my model, and make PreviewView listen to collection "change" events? </li>
  </ul>
  
  <p>Thank you, if you need more details tell me please, I'll edit the question.</p>