3

Setup

Imagine an Ember.js app (tried v1.13.9) with this structure:

  1. ApplicationRoute
  2. IndexRoute
  3. IndexController

On the index template, there's simply a button with an action:

<!-- index/template.js -->
<button {{action 'ping' 'index template'}}>index</button>

All routes/controllers handle this action, printing out a message and passing the action up until it reaches ApplicationRoute. Eg, for IndexRoute it is:

// excerpt from index/route.js
actions: {
  ping(from) {
    console.log('IndexRoute^ping from', from);
    return true;
  }
}

This same action can also originate at IndexController:

// excerpt from index/controller.js
thingsHappen() {
  this.send('ping', 'index controller');
}

You can see the code and play with it at these URLs:

Question

When you press the button, the messages show that the action is seen by all three routes/controllers, in order, from the inside bubbling up. However, when the action is sent from IndexController, it skips IndexRoute. Why is this?

1 Answer 1

3

It's related to the fact that the route hasn't truly been transitioned to yet. So the index route isn't part of the current chain. If you want to make sure the index route has been loaded you can hook up to the transition promise and wait for it to complete before calling your action.

 setupController(controller, model, transition) {
    controller.wake('non attached');
    transition.then(function(){
      controller.wake('attached');
    });
  },

http://ember-twiddle.com/e36c0228967fb4485d27

2
  • D'oh, you are right. This is one other of many things in Ember.js that are not obvious at all :-/
    – pablobm
    Aug 30, 2015 at 19:37
  • Well, you are doing non obvious things in your code :P
    – locks
    Sep 1, 2015 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.