Reusing Components

First Aurelia question :slight_smile: :
I am developing a simple prototype app that contains a globe viewer implemented in Cesium. The globe is a Aurelia component configured in the router.

My question is that if I wanted to navigate to another component via the router and back to the globe component, is there a way to configure Aurelia to not destroy and recreate the component? Currently, it appears that the entire Cesium globe is recreated every time I navigate away and back. In the docs, it appeared like “determineActivationStrategy” was something I needed to configure correctly, but that doesn’t appear to do anything.

What are you returning from determineActivationStrategy()?

Also, it should sit beside configureRouter() where the route to your globe module is configured (as opposed to on the globe module itself).

No, caching a route component isn’t currently supported. There’s an open issue on github about it, and some work has been done, but it isn’t ready just yet.

That’s too bad. I imagine I can simulate the behavior by catching some events and hiding the div from the app.html template.

I’ve got a pull request in that I think might help you. Take a look at https://github.com/aurelia/router/pull/538.

You could place your globe html outside the router-view

<div id="globeElement">Globe</div>
<router-view></router-view>

Your globe route should then hide & show the globe div

export class GlobeView {
    activate() {
        document.getElementById('globeElement').classList.remove('hide');
    }
    
    deactivate() {
        document.getElementById('globeElement').classList.add('hide');
    }
}
1 Like

I would propose that you create a static member which holds the real globe instance.

Untested code

export class GlobeComponent {

  static inject = [Element];

  static globeElement = null;

  constructor(element) {
    this.element = element;
  }

  bind() {
    if (!this.constructor.globeElement) {
      const globe = document.createElement('div');
      // Render globe into div
      this.constructor.globeElement = globe;
    }
  }
  
  attached() {
    this.element.appendChild(this.constructor.globeElement);
  }

  detached() {
    this.element.removeChild(this.constructor.globeElement);
  }
}
1 Like