Ember.js - Propagate event up the controller/router chain

Question

In Ember.js, events that aren't handled in the controller propagate up the router chain to the application route (see http://emberjs.com/guides/views/handling-events/ for more details).

Is there a way to define an event handler in the controller that allows the event to continue propagating to the router?

App.SampleController = Ember.ObjectController.extend({
  myEvent: function(obj) {
    this.set('aVariable', true);
  }
});

App.ApplicationRoute = Ember.Route.extend({
  events: {
    myEvent: function(obj) {
      this.transitionTo('something');
    }
  }
});

Is there a way for the myEvent handler in CarsController to set its internal state variable but also kick the event up the chain to the application route? I'm aware of this:

App.__container__.lookup('router:main').send('myEvent', obj);

but it uses Ember internals. I was hoping there was a more standard way to do this.

intuitivepixel intuitivepixel · Accepted Answer · 2013-07-19T16:37:38

One way to achieve this could be:

App.SampleController = Ember.ObjectController.extend({
  needs: 'application',
  myEvent: function(obj) {
    this.set('aVariable', true);

    this.get('controllers.application').send('myEvent');
  }
});

Working demo.

Hope it helps.

Ember.js - Propagate event up the controller/router chain

1 Answers