Delegating events to a parent view in Backbone

backbone.js, delegation, events, javascript, model-view-controller

Solution

In your parent view (extending also from `Backbone.Events`), I would bind `onEvent` to the DOM event. On trigger, it would fire a backbone event including some "id" attribute that your child views know (presumably some row id?).

var TuneBook = Backbone.View.extend(_.extend({}, Backbone.Events, {
    events: {
        "click .tune .button": "clickHandler"
    },
    clickHandler: function (ev) {
        this.trigger('buttonClick:' + ev.some_id_attr, ev);
    },

}));

Child views would then naturally subscribe to the parent views event that concerns them. Below I do it in `initialize` passing the parent view as well as that special id attribute you used before in `options`.

var ClosedTune = Backbone.View.extend({

    initialize: function (options) {
        options.parent.on('buttonClick:' + options.id, this.handler, this);
    },

    handler: function (ev) {
        ...
    },

});

You can of course also set up similar subscribers on `Tune` or `OpenTune`.

Problem

My view, `TuneBook`, has several child views of type `ClosedTune`. I also have separate full page views for each tune, `OpenTune`. The same events are bound within `ClosedTune` and `OpenTune`, so I've designed my app so that they both inherit from a shared 'abstract' view `Tune`. To make my app more scaleable I would like the events for each `ClosedTune` to be delegated to `TuneBook`, but for maintainability I would like the same handlers (the ones stored in `Tune`) to be used by `TuneBook` (although they'd obviously need to be wrapped in some function). The problem I have is, within `TuneBook`, finding the correct `ClosedTune` to call the handler on. What's a good way to architect this, or are there other good solutions for delegating events to a parent view? Note - not a duplicate of Backbone View: Inherit and extend events from parent (which is about children inheriting from a parent class, whereas I'm asking about children which are child nodes of the parent in the DOM)

Original source

Related problems