How can I "bubble up" events in a Backbone View hierarchy?

Question

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:

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();

    }

});

Essentially, whenever the FilterView's toggleFilter() function is called, I would like to fire off an event called filtered or something like that that is then caught by the NewsListView, which then calls its reset() function. Without passing a reference of a NewsListView object to my FilterView, I'm not sure how to send it an event. Any ideas?

Answer 1

You're on the right track. It sounds like what you need is a global event dispatcher. There a decent article and example here: http://www.michikono.com/2012/01/11/adding-a-centralized-event-dispatcher-on-backbone-js/

Answer 2

You might be able to do this using the already available functionality of jquery events and the backbone events property.

For example, instead of doing this from inside your subview:

this.trigger("yourevent", this);

do this instead:

this.$el.trigger("yourevent", this);

Then in any view that is a parent, grandparent, etc of your child view, listen for the event on that view's $el by defining a property on that view's events object:

events:{
    "yourevent":"yourhandler"
}

and define the handler on that view as well:

yourhandler:function(subview) {
}

So this way, a view doesn't need to know about what descendant views exist, only the type of event it is interested in. If the view originating the event is destroyed, nothing needs to change on the ancestor view. If the ancestor view is destroyed, Backbone will detach the handlers automatically.

Caveat: I haven't actually tried this out yet, so there may be a gotcha in there somewhere.