EmberJS: force transition to parent route

Question

I've got two routes: a main route, called parent , and a child route of it called parent.child . When something happens (let's call it X ) in parent.child , I want to transition to parent , but since technically we're already there, Ember does nothing.

// 'parent.child' controller
this.transitionToRoute('parent');

So I want to know if there's a way to force this "transition". The reason is that there's code in parent that needs to re-run after X occurs.

Answer 1

You can call refresh on your parent route.

Now the simplest way to call an action on your parent route is, well, to define one, and then use send on your controller to let the action bubble up.

So your parent route:

class ParentRoute extends Route {
  @action
  refreshParent() { // dont name it refresh because of the naming conflict
    this.refresh();
  }
}

and your child controller:

class ChildController extends Controller {
  @action
  refreshParentRoute() { // again, another name
    // this will first look for a `refreshParent` action on this controller,
    // then the `child` route and last the `parent` route.
    this.send('refreshParent');
  }
}

Answer 2

In order to get back up our of the child route you can call

this.transitionToRoute('parent.index');

I'm not sure this solution will fix your problem without seeing your app, for example this probably won't re-run hooks in the parent route, you may need to either move them into routes/parent/index or re-design how those hooks work.