Template dynamique

Voici un élément que j'ai trouvé en fouillant stackoverflow qui permet de charger un template dynamiquement pendant l'exécution de l'application. Ce template pourra ainsi être stocké en base de données et ne pas encombrer le bundle de code statique s'il n'a pas besoin d'être chargé par tous les utilisateurs.

Nous allons appeler ce custom element dynamic-element. Voici son implémentation en ESNext :

src/elements/dynamic-element/dynamic-element.js

import {bindable, InlineViewStrategy} from 'aurelia-framework';

export class DynamicElement {  
  @bindable view;
  @bindable model;
  @bindable templateHref;

  viewChanged() {
    if (this.view) {
      this.viewStrategy = new InlineViewStrategy(this.view);
    }
  }

  modelChanged(model) {
    for (let key of Object.keys(model)) {
      this[key] = model[key]:
    }
  }
}

src/elements/dynamic-element/dynamic-element.html

<template>  
<compose  
  view.bind="viewStrategy"
  model.bind="model"></compose>
</template>  

Ainsi, si ailleurs j'ai le markup suivant :

  • src/ailleurs.html*
<require  
  from="resources/elements/dynamic-element/dynamic-element"></require>
<dynamic-element  
  view.bind="'<template><p>Hello ${label}</p></template>'"
  model.bind="{label: 'World'}"></dynamic-element>

"Hello World" s'affichera.

On pourra aussi évidemment charger le template depuis le contrôleur de cette vue et le changer en cours d'exécution en utilisant une variable :

  • src/ailleurs.html*
<require  
  from="resources/elements/dynamic-element/dynamic-element"></require>
<dynamic-element  
  view.bind="loadedTemplate"
  model.bind="loadedVars"></dynamic-element>

Dans ce template, on peut utiliser toutes les fonctionnalités du moteur de templates. L'interpolation, mais aussi les requires.

Hadrien Lanneau

Développeur de guichet, expert ESNext pile complète

Toulouse, France https://hadrien.eu

Subscribe to Aurelia Framework pour les frenchies

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!