Event bubbling through parent controller

Question

I have the following route

App.Router.map(function() {
  this.resource('projects', {path: 'projects'}, function(){
      this.route('new', {path: 'new'});
      this.route('show', {path: ':project_id'});
      this.route('edit', {path: ':project_id/edit'});
  });  
});

I want all the events from 'ProjectsNewController', 'ProjectsShowController', 'ProjectsEditController' to bubble to 'ProjectsController'.

How can I attain this? JSBin: http://jsbin.com/ucanam/1284/edit

Answer 1

The way event bubbling works in ember is not:

ChildController -> Controller -> ParentController

but rather:

View -> Controller -> Route -> ApplicationRoute (optionally)

Therefore if an event is fired from the view it will bubble up to the controller and stop there, if the controller returns true from the event handler then it will continue to bubble up to the route. Events that are not handled in the controller nor the route will bubble all the way up to the ApplicationRoute.

To achieve what you want to do you should use the needs API to obtain access to the ProjectsController and send the events/actions to that controller using .send(...).

For example:

App.ProjectsController = Ember.ArrayController.extend({
  actions:{
    newProject: function() {
      console.log("ProjectsController:newProject");
    }
  }
});

App.ProjectsNewController = Ember.ObjectController.extend({
  needs: ['projects'],
  actions:{
    newProject: function() {
      console.log("ProjectsNewController:newProject");
      // forward action to ProjectsController
      this.get('controllers.projects').send('newProject');
    }
  }
});

App.ProjectsEditController = Ember.ObjectController.extend({
  needs: ['projects'],
  actions:{
    newProject: function() {
      console.log("ProjectsEditController:newProject");
      // forward action to ProjectsController
      this.get('controllers.projects').send('newProject');
    }
  }
});

Hope it helps.