Création de modèles HTML avec moustache.js

Les applications Web utilisent généralement une architecture MVC pour séparer la logique métier des vues de présentation. Des projets complexes impliquent un grand nombre de HTML clients qui utilisent des opérations JavaScript, qui peuvent être difficiles à maintenir. Dans ce cas, nous pouvons utiliser un système de modèle pour améliorer la réutilisabilité et simplifier les tâches de gestion de la vue. Mustache.js fournit un système de modèles bien documenté qui peut être utilisé pour gérer les modèles. De plus, puisque Mustache prend en charge plusieurs langues, nous n'avons pas besoin d'utiliser un système de modèle séparé côté serveur. Cet article décrit les bases de l'utilisation de la moustache.

Points clés

• Mustache.js est un système de modèle bien documenté qui peut être utilisé pour gérer les modèles HTML dans des applications Web complexes, améliorer la réutilisabilité et simplifier les tâches de gestion de la vue.
• moustache.js est illogique, ce qui signifie que son modèle ne contient aucune condition IF-Else ou pour les boucles. Il utilise des étiquettes indiquées par double accolade pour ajouter des données au modèle.
• Les modèles de moustache peuvent être définis de plusieurs façons, y compris des méthodes en ligne, des scripts en ligne et des extraits de HTML externes. La méthode à choisir dépend des besoins spécifiques du projet.
• Mustache.js est un outil multifonction qui peut être utilisé à la fois sur le client et le côté serveur et prend en charge plusieurs langues. Il est également livré avec des balises pour gérer des modèles complexes tels que les variables, les sections, les fonctions et les modèles partiels.

Pourquoi avons-nous besoin d'un système de modèle?

La plupart des développeurs qui ne connaissent pas les systèmes de modèles créent de nouveaux blocs HTML de code et les insérent dynamiquement dans le DOM à l'aide de JavaScript. Une méthode courante consiste à spécifier l'élément HTML en tant que chaîne, puis à définir la propriété InnerHTML ou à appeler la méthode jQuery Html (). Voici un exemple:

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

Une autre façon de construire un DOM est de créer des éléments et de les ajouter séparément, comme indiqué ci-dessous:

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);

Les deux méthodes ci-dessus peuvent ajouter efficacement des éléments au document dynamiquement. Considérez une situation où nous avons une liste de balles bien conçue qui doit être utilisée dans trois types de pages du site Web. En utilisant ces techniques, nous devrons répéter la liste du code HTML dans trois endroits différents. Ceci est souvent considéré comme une mauvaise habitude de codage. Dans ce cas, nous pouvons utiliser des modèles prédéfinis à différents endroits sans duplication du code. Mustache.js est un moteur de modèle JavaScript très populaire. Étant donné que Mustache propose des modèles côté serveur et côté client dans plusieurs langues, nous n'avons pas à nous soucier de choisir un moteur de modèle séparé.

débutant de moustache.js

Mustache est un système de modèle sans logique open source adapté aux langages tels que JavaScript, Ruby, Python, PHP et Java. Vous pouvez accéder à la page officielle de GitHub pour obtenir une copie de la bibliothèque. Mustache utilise des modèles et des vues comme base pour créer des modèles dynamiques. La vue contient les données JSON à inclure dans le modèle. Un modèle contient une présentation HTML ou des données avec des balises de modèle qui contiennent des données de vue. Nous avons mentionné plus tôt que la moustache est illogique. Cela signifie que le modèle ne contient aucune condition IF-Else ou pour les boucles. Maintenant, commençons avec le modèle de moustache avec un exemple simple.

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

Tout d'abord, nous devons inclure le fichier moustache.js dans le document. Ensuite, nous pouvons commencer à créer le modèle de moustache. Dans l'exemple ci-dessus, nous avons une vue contenant le nom et l'occupation d'une personne. Nous utilisons ensuite des balises qui présentent le code et le nom et les données de carrière dans la fonction render (). Les étiquettes sont représentées par des accolades doubles ou des barbes qui les entourent. Voyons maintenant comment fonctionne la méthode Render ().

Rendre le modèle de moustache

Le code suivant montre l'implémentation de la fonction render () dans le fichier moustache.js. Trois paramètres peuvent être transmis à Render (). Les deux premiers modèles de paramètres et la vue sont nécessaires. Les partiels peuvent être considérés comme des modèles dynamiques que vous pouvez injecter dans le modèle principal. Dans notre exemple précédent, nous avons passé le modèle en tant que paramètre en ligne, la vue comme un deuxième paramètre et attribué le résultat à la variable de sortie.

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);

Il s'agit de la forme la plus élémentaire de modèles à l'aide de la moustache. Jetons un coup d'œil à d'autres méthodes qui peuvent être utilisées pour créer plus de code canonique.

Définition Modèle de moustache

Il existe plusieurs façons de définir des modèles de moustache dans votre application. Ces méthodes sont similaires à l'utilisation de styles en ligne, de feuilles de style en ligne et de feuilles de style externe pour inclure le CSS. L'exemple que nous avons discuté précédemment peut être considéré comme une méthode en ligne car nous passons le modèle directement à la fonction. Cette méthode empêche la possibilité de modèles réutilisables. Voyons comment définir un modèle comme un modèle de script en ligne au lieu de le transmettre directement à une fonction.

Modèle comme script en ligne

Nous pouvons aller à

Vous pouvez inclure autant de modèles avec différents ID dans le document que vous le souhaitez. Lorsque vous souhaitez utiliser un modèle, utilisez InnerHTML pour obtenir le HTML à l'intérieur de la balise de script et passer comme modèle. Notre premier exemple sera modifié par le code suivant:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mustache.js Inline Method</title>
  <🎜>
</head>
<body>
  <🎜>
  <p id="person"></p>
</body>
<🎜>
</html>

Comme vous pouvez le voir, le modèle est stocké séparément et utilisé dynamiquement en cas de besoin. Cette méthode augmente la possibilité de réutiliser des modèles. Cependant, l'utilisation de scripts en ligne limitera la portée du modèle à une page. Si vous avez plusieurs pages, vous devez à nouveau définir le modèle. Donc, inclure des modèles dans des fichiers externes serait la solution idéale - tout comme CSS.

Modèle comme extrait HTML externe

Dans cette technique, nous utiliserons jQuery pour implémenter des modèles. jQuery fournit une fonction appelée chargement () qui peut être utilisée pour faire partie d'un document externe. Nous utiliserons cette méthode pour charger le modèle dynamiquement à partir du fichier de modèle externe. La fonction Load () exécute des scripts au lieu de les retourner, nous ne pouvons donc pas créer de modèles à l'intérieur de balises de script comme nous l'avons fait dans la méthode précédente. L'exemple suivant montre le fichier de modèle externe que nous utiliserons.

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;

Nous avons utilisé l'élément <div> au lieu de scripts pour les modèles pour le rendre compatible avec la fonction de charge () de jQuery. Ici, nous avons trois modèles différents avec trois ID différents. Maintenant, continuons à utiliser ces modèles dans votre page. <pre class='brush:php;toolbar:false;'>var title = document.createElement('div'); var highlight = document.createElement('span'); var highlight_text = document.createTextNode(&quot;Highlight&quot;); var author = document.createElement('span'); var author_text = document.createTextNode(&quot;Author&quot;); var container = document.getElementById('container'); highlight.appendChild(highlight_text); title.appendChild(highlight); author.appendChild(author_text); title.appendChild(author); container.appendChild(title);</pre> <p> jQuery insère le document retourné dans un élément HTML au lieu de l'attribuer à une variable. Par conséquent, nous avons besoin d'un conteneur virtuel pour maintenir le modèle. J'ai utilisé le conteneur de modèle qui est caché par défaut. L'exemple ci-dessus récupère Template1 et le charge. Nous pouvons ensuite obtenir le modèle à partir du conteneur virtuel et le transmettre à la moustache pour le rendu. C'est ainsi que fonctionnent les méthodes externes. Nous pouvons également utiliser la demande AJAX pour obtenir des données du serveur. </p> <p> <strong> Conclusion </strong> </p> Les moteurs et les cadres de modèle <p> sont très importants pour gérer des systèmes complexes avec des vues de présentation à changement dynamique. Mustache.js est l'un des meilleurs choix pour les modèles d'administration du côté client. Nous expliquons au début de ce tutoriel pourquoi les modèles sont importants. Ensuite, nous continuons à introduire diverses techniques à l'aide de modèles de moustache. Vous pourrez désormais choisir un moyen d'implémenter le modèle de moustache dans votre projet. Nous avons fait de l'exploration de diverses techniques d'utilisation de modèles de moustache, mais la moustache est également livrée avec des balises telles que des variables, des sections, des fonctions et des modèles partiels utilisés pour gérer des modèles complexes. Discuter de la syntaxe pour chaque balise est au-delà de la portée de ce tutoriel. Vous pouvez trouver un guide complet de la balise de moustache sur la page Moustache Github. N'hésitez pas à partager votre expérience antérieure avec Mustache.js! </p> <p> <strong> moustache.js FAQ (FAQ) </strong> </p> <ul> <li> <strong> Quelle est la principale différence entre Mustache.js et autres bibliothèques de modèles JavaScript? </strong> </li> </ul> <p> Mustache.js est une syntaxe de modèle logique. Cela signifie qu'il peut être utilisé pour HTML, fichiers de configuration, code source - tout. Il fonctionne en étendant les étiquettes dans les modèles en utilisant le hachage ou les valeurs fournies dans l'objet. Contrairement à d'autres bibliothèques de modèles JavaScript, Mustache.js ne contient aucune instruction IF, clauses sinon ou pour boucles. Au lieu de cela, il n'a que des étiquettes. Certaines balises sont remplacées par une valeur, d'autres n'ont rien, d'autres sont une série de valeurs. </p> <ul> <li> <strong> Comment utiliser Mustache.js pour les modèles HTML? </strong> </li> </ul> <p> Pour utiliser Moustache.js pour les modèles HTML, vous devez d'abord inclure le script Moustache.js dans le fichier HTML. Ensuite, vous définissez un modèle dans la balise <code><script></script>. Ce modèle peut contenir des espaces réservés pour insérer des données. Ces lieux sont représentés par des accolades doubles, telles que {{nom}}. Vous utilisez ensuite la fonction moustache.render () pour rendre le modèle avec les données que vous avez fournies.

• Puis-je utiliser Mustache.js avec node.js?

Oui, vous pouvez utiliser Mustache.js avec node.js. Pour ce faire, vous devez installer le package Moustache à l'aide de NPM. Une fois l'installation terminée, vous pouvez en avoir besoin dans le fichier node.js et l'utiliser pour rendre le modèle.

• Comment utiliser Mustache.js pour traverser les tableaux?

Dans Mustache.js, vous pouvez traverser le tableau à l'aide de la syntaxe {{#Array}}… {{/ array}}. Dans ce bloc, vous pouvez utiliser {{.}} Pour référencer l'élément actuel dans le tableau. Cela vous permet d'afficher chaque élément dans le tableau du modèle.

• Comment utiliser les instructions conditionnelles dans Mustache.js?

Bien que Mustache.js soit une bibliothèque de modèles logiquement ungique qui ne prend pas en charge les instructions IF traditionnelles, vous pouvez toujours utiliser des sections pour obtenir des résultats similaires. Les sections rendent les blocs de texte une fois ou plus en fonction de la valeur de la clé dans l'objet de données.

• Comment inclure certains modèles dans Mustache.js?

Certains modèles de moustache.js vous permettent d'inclure des modèles plus petits dans un modèle plus grand. Ceci est très utile pour réutiliser des éléments communs tels que les en-têtes et les pieds de page. Pour inclure des modèles partiels, vous pouvez utiliser la syntaxe {{& gt; partielle}}.

• Comment échapper à HTML dans Mustache.js?

Par défaut, Mustache.js échappe à HTML dans les données pour empêcher les attaques XSS. Si vous souhaitez rendre HTML à partir de vos données, vous pouvez utiliser une syntaxe Triple Brace, telle que {{{html}}}.

• Puis-je utiliser Mustache.js pour le côté serveur?

Oui, vous pouvez utiliser Mustache.js pour le côté serveur. Ceci est utile pour le rendu des modèles avant de les envoyer au client, en réduisant le montant de JavaScript qui doit être exécuté sur le client.

• Comment précompiler un modèle dans moustache.js?

Les modèles précompilés dans Mustache.js peuvent améliorer les performances en réduisant le travail qui doit être effectué au moment de l'exécution. Pour précompiler un modèle, vous pouvez utiliser la fonction Mustache.Parse ().

• Comment déboguer le modèle moustache.js?

Le débogage du modèle moustache.js peut être délicat car la bibliothèque ne fournit pas beaucoup de messages d'erreur. Cependant, vous pouvez utiliser la fonction Mustache.Parse () pour vérifier si votre modèle est valide. Cette fonction renvoie un tableau de balises que vous pouvez vérifier pour voir si votre structure de modèle est correcte.