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.

Thais

I don't believe there's a way to not render the custom-element again after leaving and coming back. When you leave the page, the elements are detached. If you come back, they are attached again. – Sherrill

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.

Nedi

I'll award the bounty to your answer, even though it feels like a hacky solution. I guess this scenario is something for the Aurelia wish list. – Thais

The tutorial example you mentioned unfortunately does not solve the problem, since it is a very simple app with only the one viewmodel. If you would add more viewmodels and would navigate away to another route, the same would happen as in my example. – Thais

@Thais In our project we are using the similar pattern. We have a nav-bar, as well a side nav-bar. Both of these are custom element and added in app.html like a standard custom element, outside the router-view element. And these elements are agnostic to route change. More specifically, the elements are activated only once. That's why we are also using event aggregator to sync the changes. However, it is difficult for me to comment more on this without the concrete details of your element. – Nedi