Utilisation de partiels en ligne et de décorateurs avec guidon 4.0

Groodbars, une bibliothèque de modèles JavaScript populaire pour le rendu côté client et côté serveur, étend la spécification de la moustache pour une meilleure gestion des modèles. Pour les nouveaux arrivants, l'exploration des modèles JavaScript avec un guidon via un cours Pluralsight est recommandé. Le guidon 4.0 (septembre 2015) a introduit des améliorations significatives: les partiels en ligne et les décorateurs. Cet article explore les deux, détaillant leur syntaxe et leur utilisation optimale.

Concepts clés:

• Caractéristiques clés du guidon 4.0: partiels en ligne (modèles réutilisables) et décorateurs (modifier les états de rendu).
• Partial en ligne: défini dans les modèles, éliminant le besoin d'enregistrement JavaScript. Ils sont scopés en blocs, limitant l'utilisation aux lunettes actuelles et imbriquées. Idéal pour les petits extraits HTML réutilisables.
• Décorateurs: modifiez la fonction du programme du guidon, influençant l'exécution avant l'exécution. Utile pour modifier les données de contexte ou les aides.
• Les décorateurs améliorent la modularité du code, l'extensibilité et la testabilité, particulièrement bénéfiques pour les tâches telles que le formatage des devises.
• Les deux fonctionnalités rationalisent le développement frontal, résultant en un code plus propre, plus organisé et potentiellement plus efficace.

partiels en ligne

Partials, un concept de modèles commun, favorise la réutilisation du code en séparant les modèles réutilisables en fichiers individuels. Cependant, les partiels traditionnels du guidon ont des limites: portée globale, nécessitant un enregistrement JavaScript (bien que souvent géré par les pré-compositeurs) et la séparation de leur contexte d'utilisation. Cela restreint souvent leur utilisation aux seuls blocs de code réutilisables uniquement.

Les partiels en ligne abordent ces problèmes. Défini dans les modèles à l'aide de la syntaxe du guidon, ils ne nécessitent aucun enregistrement JavaScript. Leur nature à l'espace en bloc limite leur utilisation aux lunettes actuelles et aux enfants. Choisissez des partiels en ligne pour de petits segments HTML réutilisables qui sont soit trop petits pour des fichiers séparés ou utilisés exclusivement dans un seul modèle.

en utilisant des partiels en ligne

Déclarer un partiel en ligne en emballage le code réutilisable avec {{#* inline "partialName"}} ... {{/inline}}. Ensuite, utilisez-le dans le modèle via {{> partialName}}.

Exemple:

Au lieu de répéter <code><li>{{firstName}} {{lastName}}</li> {{FirstName}} {{LastName}}

, utilisez un partiel en ligne:

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

Comparaison partiels et partiels en ligne

{{firstName}} {{lastName}} Considérons un modèle avec

: <🎜> répété

• Partial traditionnel: nécessite un fichier JavaScript séparé pour enregistrer Handlebars.registerPartial('fullName', '{{firstName}} {{lastName}}'); puis l'utilisation dans le modèle comme {{> fullName}}. Cela sépare la définition du partiel, rendant la compréhension du modèle complet plus difficile.

• en ligne partielle: une approche plus propre et autonome:

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

décorateurs

Les décorateurs modifient la fonction du programme du guidon, influençant le processus de rendu. Ils fournissent des métadonnées pour améliorer la fonctionnalité des modèles, agissant comme un compagnon plus fondamental pour les fonctions d'assistance.

La compilation du guidon implique: 1. Obtenir le modèle; 2. Le compiler; 3. Rendre la sortie. Les décorateurs interviennent dans l'étape de compilation (Handlebars.compile), affectant les fonctions compilées à socle en bloc. Ils contrôlent l'exécution avant le rendu, permettant des modifications pour contexte les données ou les aides.

en utilisant les décorateurs

Les décorateurs sont enregistrés à l'aide de Handlebars.registerDecorator(). La fonction reçoit (program, props, container, context).

• program: La fonction du guidon compilé. Modifier les arguments, les valeurs de retour ou le contexte.
• props: Les propriétés définies ici affectent la fonction de programme, même si elle est remplacée. Utile pour les métadonnées.
• container: Le conteneur d'exécution du guidon (partiels, aides, contexte). Modifiable.
• context: Le contexte parent, y compris les arguments et les données du décorateur.

Le décorateur doit renvoyer une fonction (ou une valeur de fausset) pour rendre le modèle modifié.

Exemple: Formatage des devises

Avant le guidon 4.0, le formatage des devises reposait souvent sur les aides. Les décorateurs offrent une solution plus élégante.

Un décorateur peut enregistrer dynamiquement une aide de mise en forme de devises en fonction du contexte:

{{#* inline "fullName"}}{{firstName}} {{lastName}}{{/inline}}
<h1 id="Hello-gt-fullName">Hello {{> fullName}}</h1>

Ensuite, dans le modèle:

Handlebars.registerDecorator('activateFormatter', function(program, props, container, context) {
    // ... logic to select currency formatter based on context ...
    container.helpers = { formatMoneyHelper: selectedFormatter };
});

Cette approche est plus modulaire, extensible et testable que d'utiliser les aides seuls.

Conclusion

Les partiels et les décorateurs en ligne améliorent considérablement le guidon, améliorant l'organisation du code, la réutilisabilité et la testabilité. Ce sont des outils précieux pour construire des applications frontales plus maintenables et plus efficaces.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!