CODEWITHSUNDEEP
javascriptember.js
pablobm
pablobm

Reputation: 2066

Ember.js action bubbles up and skips a route

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?

Upvotes: 3

Views: 66

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

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

Upvotes: 3

Related Questions