Delegating events to a parent view in Backbone

Question

My view, TuneBook, has several child views of type ClosedTune. I also have separate full page views for each tune, OpenTune. The same even

Answer 1

Great solution I have taken from this article (@dave-cadwallader comment).

Extend an general backbone events object and store it in a reference vent:

var vent = _.extend({}, Backbone.Events);

Pass it to parent view:

var parentView = new ParentView({vent: vent});

The child view will trigger an event:

ChildView = Backbone.View.extend({    
  initialize: function(options){
    this.vent = options.vent;
  },

  myHandler: function(){
    this.vent.trigger("myEvent", this.model);
  }
});

And the parent view is listening to the child event:

ParentView = Backbone.View.extend({    
    initialize: function(options){
        this.vent = options.vent;
        this.vent.on("myEvent", this.onMyEvent);

        let childView = new ChildView({vent: this.vent});
    },

    onMyEvent: function(){
        console.log("Child event has been ");
    }
});

Disclaimer - pay attention that the vent object has to be injected to every view so you will find in this article better design patterns to make use of.