Proper way to set parent controller state from child route

Questions
1

Hi all,

I have multiple cases where a parent route tree shows some form of list navigation of its children branches. This navigation should then indicate the current selected child (active child route).

How I did it this far is by having a selectedBranch property in the treeController and setting it in the branchRoute like so:

afterModel(model) {
      this.controllerFor('tree').set('selectedBranch', model);
 }

while this works I was wondering whether this is the best way to achieve what I want, more so as I get an ESLint warning for accessing the controller.

In addition I am running into a problem when adding more levels. Like when the navigation in tree also shows leaves of branches.

For this to work, I also set the selectedLeaf property in tree. In the leafRoute:

afterModel(model) {
  this.controllerFor('tree').set('selectedBranch', model);
}

and in the branchRoute I set it to undefined:

afterModel(model) {
  this.controllerFor('tree').setProperties({
    selectedBranch:  model,
    selectedLeaf: undefined
  });
}

What happens is that when navigating from a leaf route to its parent branch route, the model and afterModel hooks in branchRoute are not executed again and thus the active selection is not properly updated in tree.

So is there a better way to do this?

Thanks in advance,

Moe

2

Hi @MoeSzyslak, your approach with the tree controller works fine (and is an older pattern that used to be used in Ember 1.x days before services were introduced). But you’re effectively using the tree controller as a bucket of state for a given template hierarchy, so you could also use a service to help with the same thing. Because controllers are singletons (just like services) you would end up with the same rough approach, but it gets a bit easier to understand/work with for folks who aren’t as familiar with controller injections / lookups. Plus, that service could be injected into components if desired.

As far as clearing out the selections, if you use a didTransition action (Route - 3.25 - Ember API Documentation) on your branchRoute, you can clear state on your controller/service when you leave. Interestingly, the docs for it specifically mention resetting state on the controller :slight_smile:

3

Thanks a lot @acorncom! I’ll look into using a service but until then didTransition solves my issue :slight_smile: