Common EmberJS Route Events

Question

Is there a way to have common events shared among multiple routes in Ember?

Sample:

App.CommonMenu = Ember.Mixin.create({
  events: {
    onDelete: function() {}
  }
});

App.MainMenu = Ember.Route.extend(App.CommonMenu, {
  events: {
    onSave: function() {}
  }
});


App.StoreMenu = Ember.Route.extend(App.CommonMenu, {
  events: {
    onSave: function(){}
  }
})

I'm only asking because I continue to get an error where, when a button is clicked, I get something similar to this:

Uncaught Error: Nothing handled the event 'onDelete'. 

Answer 1

A better way I can think of handling events globally across routes would be to define them in the events hash in your ApplicationRoute

App.ApplicationRoute = Ember.Route.extend({
  events: {
    myEvent: function() {
      // do stuff
    }
  }
});

App.MainMenu = Ember.Route.extend({
  events: {
    onSave: function() {}
  }
});

App.StoreMenu = Ember.Route.extend({
  events: {
    onSave: function(){}
  }
});

You could have also some route that handle the same event defined in your ApplicationRoute eg myEvent as long as you return true from that handler it will additionally bubble up all the way to the ApplicationRoute myEvent handler.

App.SomeOtherRoute = Ember.Route.extend({
  events: {
    myEvent: function(){
      // do stuff
      return true; // this will make the event bubble up all the way to the ApplicationRoute
    }
  }
});

Hope it helps.