Reusing Components

Help Requests
1

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.

2

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).

3

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.

4

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

5

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

6

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
7

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