如何将事件从内部组件冒泡到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!

Answer 1

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.