Proper way to set parent controller state from child route

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 posts - 2 participants

Read full topic