Aurelia: static custom element in singleton view

Question

I have an Aurelia application with a singleton view model. The view is similar to a file browser, with a tree view (custom element) on the left, and a list view on the right. The view model activationStrategy is invokeLifecycle, and the list view is populated based on route parameters. The tree view is populated with AJAX calls when a node is expanded. The tree nodes are also a custom element. The tree view is fully custom, and does not use any 3rd party plugins.

When the user navigates away to another route, and then comes back again to the same route, the view model is retained because it is a singleton. However, the tree view was not because custom elements are not supported as singletons.

I understand the reasoning behind not supporting singleton custom elements. I would like to know however what would be the best approach to somehow create a "static" tree view when navigating back to the same route. The only thing I have come up with so far, is to keep a full (expanded) tree structure in an injected shared state. However that seems inefficient to me, because the tree view will have to render again for no reason, and it complicates my code unnecessarily with added classes and logic for creating a tree structure while the tree structure is already implicit in the custom element.

Any input is appreciated.

Answer 1

My approach would be to put the tree view custom element on app.html like the nav-bar (outside of .page-host) in the navigation-skeleton. Then the custom element should not be rendered again by change of route.

It seems that a similar situation, like the one you have, is described in Aurelia docs. Refer this tutorial. Also from the tutorial:

The router-view is provided by Aurelia and is a placeholder that indicated where the router should render the current route.

In case you need to change the tree view based on some special circumstances, or route then event aggregator can be used in your tree-view custom element to handle such special cases. The tutorial also shows the use of event aggregator to sync the custom elements (refer this part).

Hope this helps.