Ember.JS - sending a message from inner controller to outer controller

Question

In Ember, I have an application where I have an outer controller who's template is rendered in a standard {{outlet}}.

However, the template contains a named outlet {{outlet details}}, and one of the actions of that controller does transitionToRoute() that renders inside that "details" outlet, and there is an inner controller that handles that nested template.

What I need to do is have an action on the inner template/controller trigger an action on the outer controller. It seems that Ember cannot break the "outlet" barrier. Events only bubble up within the outlet and not to parent outlets.

Things I've tried:

Tried this.send() and this.sendAction().
Tried injecting the outer controller into the inner controller (needs: "main", main: Ember.computed.alias("controllers.main")) - results in "undefined is not a function" error.
Using the {{action}} tag in the nested template and sending in an action that exists on the parent controller - results in "Nothing handled the action 'selectTab'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble" error.

Is what I am trying even possible? I know I could simulate this using jQuery, but I'd rather not have to do that, I prefer to do it the "ember way" (if there is one).

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-13T15:14:27

Number 2 works

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  },
  renderTemplate: function(){
    this.render();
    var fooCont = this.controllerFor('foo');
    this.render('foo',{
      into:'application',
      outlet:'foo',
      controller:fooCont
    });
  }
});

App.ApplicationController = Em.Controller.extend({
  actions:{
    hello: function(val){
      alert(val);
    }
  }
});

App.FooController = Em.Controller.extend({
  needs:'application',
  application: Em.computed.alias('controllers.application'),
  actions:{
    sendToApp: function(){
      this.get('application').send('hello', 'world');
    }
  }
});

http://emberjs.jsbin.com/qatepibu/1/edit

Ember.JS - sending a message from inner controller to outer controller

1 Answers