How to bubble events from inner components to application controller in Emberjs?

Question

I am learning Ember and writing a simple login app with Emberjs. I have a login-box component - which handles the UI and backend communication. Upon successful login, I want to store current user somewhere so that all controllers can access current user object in the app. How can I do that? I am bubbling up events from LoginBoxComponent using this.sendAction('action'). The event is bubbling up to LoginController correctly(Login Controller's template invokes the component) - However since loginController is not in parent path of all controllers(I assumed applicationController is parent of all controllers - correct me if I am wrong), I am letting the event bubble up to application controller by not handling it in LoginController. However rails complains with

Error: Nothing handled the action 'userLogin'. 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.

templates/login.hbs

<div class="col-sm-offset-3 col-sm-6">
  {{login-box store=store action="userLogin"}}
</div>

my success handler in components/login-box.js

  onSuccess: function(post) {
    console.log(post);
    this.sendAction('action');
  },

code in controllers/application.js

  actions: {
    userLogin: function() {
      this.set('currentUser', '123');
      this.transitionTo('index');
    }

However, If I handle this action in applicationRouter, it gets handled correctly - I dont understand why its skipping application controller. I dont want to handle it in application router because I can't set a global currentUser object from there.

Greatly appreciate any help. Thanks!

artych artych · Accepted Answer · 2015-06-16T13:54:54

Actions sent from components first go to the template's controller.

If the controller does not implement a handler for that action, it will bubble to the template's route, and then up the route hierarchy. For more information about this bubbling behavior, see Action Bubbling.

So your action is bubbling: Login Controller => Login Route => Application Route.

How to bubble events from inner components to application controller in Emberjs?

1 Answers