javascript - Event bubbling through parent controller - Stack Overflow

admin管理员组

文章数量:1295306

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:

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./ucanam/1284/edit

• javascript
• ember.js

Share Improve this question Follow asked Oct 2, 2013 at 1:54 hashghashg 80611 gold badge88 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

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.

本文标签： javascriptEvent bubbling through parent controllerStack Overflow