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)
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
.