Skip to main content

Déclarer un Template

En Lithium, un template est une structure qui permet de définir le rendu HTML d'un composant ou d'une vue. Les ViewTemplate sont des encapsulations optimisées de ces templates, offrant des performances améliorées pour le rendu dynamique.

tip

Il est préférable de déclarer un template en utilisant une fonction pour le contenu dynamique, plutôt qu’en insérant directement des expressions dans le littéral de template.

Template et contenu dynamique​

Les templates sont déclarés en utilisant des littéraux de template JavaScript marqués par la fonction html :

import { html, ViewTemplate } from '@lithium-framework/core';

// Déclaration d'un template simple
let template: ViewTemplate<any> = html`${(context) => {

  return html`<h1>Hello, ${context.name}!</h1>`;

}}`;
note

Pourquoi cette approche est préférable :

  1. Clarté et Flexibilité :
    • En utilisant une fonction pour gérer le contenu dynamique, vous séparez clairement la logique de traitement des données de la déclaration du template. Cela rend le code plus lisible et maintenable.
  2. Contrôle Avancé du Contexte :
    • Avec une fonction, vous pouvez manipuler le contexte de manière plus détaillée avant de produire le HTML final. Vous pouvez effectuer des opérations conditionnelles, des boucles, ou d'autres transformations nécessaires.
  3. Performance Améliorée :
    • Les fonctions permettent une gestion plus fine du contexte, ce qui peut conduire à des optimisations au niveau du rendu. Lithium peut mieux gérer les changements dynamiques et minimiser les recalculs inutiles.
  4. Réutilisabilité :
    • En encapsulant la logique de génération de contenu dans une fonction, vous pouvez facilement réutiliser des parties du code ou ajuster la logique sans modifier le template lui-même. Cela favorise la modularité.