Ne pas recharger une vue avec Aurelia

Aurelia propose un paramètre très intéressant pour éviter de recharger constamment une vue lorsqu'on navigue. Imaginons par exemple l'interface d'un service en ligne au hasard qui propose de choisir l'un de ses nombreux comptes, et, pour chacun, de choisir une section qui va devoir charger des données. Le premier onglet charge la liste des derniers messages du compte, le second onglet charge la liste des comptes qui y sont liés. Quand on navigue entre la liste des messages et la liste des souscriptions, il va falloir recharger les données à chaque fois. On va perdre au passage la pagination de la liste des messages. Ou pas.

@Singleton()

Aurelia permet de définir une classe comme étant un singleton. Cela aura pour incidence de n'instancier qu'une seule fois la classe et de récupérer le même objet à chaque fois. Ainsi, si j'ai chargé une première fois une propriété this.account, alors lorsque je reviendrais sur la route qui affiche cette vue, this.account sera déjà présent et je n'aurais pas à le recharger depuis le serveur. La vue s'affichera alors instantanément.

démo

Le cycle de vie du composant est normalement suivi, il faut donc faire attention lors du rechargement des données à vérifier qu'on a bien besoin de recharger. Dans mon exemple, ma vue qui affiche les derniers messages charge d'abord le compte correspondant aux paramètres dans l'url. On veut donc ne pas le recharger si le compte dans l'url n'a pas changé uniquement.

Exemple

import {inject, singleton} from 'aurelia-framework';  
import {AccountsFetcher} from '../api/accounts';

@singleton()
@inject(AccountsFetcher)
export class MessagesList {  
  constructor(accountsFetcher) {
    this.accountsFetcher = accountsFetcher;
  }

  async activate (routeParams) {
    if (this.account &&
      this.account.provider === routeParams.provider &&
      this.account.name === routeParams.name) {
      return;
    }

    this.account = await this.accountsFetcher.get(routeParams);
  }
}

Ainsi, quand je passe d'un onglet à l'autre au sein du même compte, les données ne sont jamais rechargées auprès du serveur. Elles ne sont chargées que lorsque je change de compte et que donc, l'url a changé.

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu