title: How can I "bubble up" events in a Backbone View hierarchy?
body: <p>I have a backbone app with a view structure that looks like the following - note that I've removed implementations, models, collections, etc. for brevity:</p>
  
  <pre><code>NewsListView = Backbone.View.extend({
  
      el: $('li#newspane'),
  
      // This is what I would like to be able to do
      // events: { 'filtered': 'reset' }
  
      initialize: function() {
          _.bindAll(this);
      },
  
      render: function() {
      },
  
      reset: function(){
      }
  
  });
  
  FilterView = Backbone.View.extend({
  
      el: $('li.filter'),
  
      initialize: function() {
      },
  
      render: function() {
      },
  
      toggleFilter: function() {
      }
  
  });
  
  AllView = Backbone.View.extend({
  
      initialize: function() {
  
          this.newsListView = new NewsListView();
          this.filterView = new FilterView();
  
      }
  
  });
  </code></pre>
  
  <p>Essentially, whenever the <code>FilterView</code>'s <code>toggleFilter()</code> function is called, I would like to fire off an event called <code>filtered</code> or something like that that is then caught by the <code>NewsListView</code>, which then calls its <code>reset()</code> function. Without passing a reference of a <code>NewsListView</code> object to my <code>FilterView</code>, I'm not sure how to send it an event. Any ideas?</p>