Templates avec JS

Les templates sont généralement utilisés pour dupliquer du contenu avec une variation des données, ces articles par exemple, utilisent ce concept pour conserver une unicité

En javascript, l'utilisation de template peut être très pratique afin de conserver l'unicité des composants, en effet, le style général de deux composants se doit d'être identique alors que le contenu lui, va différer.

C'est alors qu'intervient le concept de template.

Ceux-ci peuvent s'implémenter de manière native à l'aide de fonctions.

On passe à la fonction un objet contenant les données à partager puis à l'aide de la notation avec backticks : `` on insère les données dans une chaine de caractère.

Il suffit alors d'utiliser une boucle sur ses données afin de passer en revue tous les ojets à décrire, en pensant à paginer au besoin ses données afin de ne pas créer de page trop longue.

Il suffira dans la boucle d'insérer l'objet nouvellement généré en le concaténant au innerHTML d'un objet ou encore en lui créant un réel objet DOM qu'on pourra intégrer par la suite avec la fonction append.

Il est important de vérifier au sein de ses templates que les données receuillies existent, en effet si le titre ne devra surement jamais manquer, d'autres données peuvent parfois être vides.

Par exemple un hotel ne sera pas toujours dôtée d'une piscine, il est donc important de permettre un échappement, pour faire ceci il est possible d'utiliser les conditions ternaires `{destination.piscine ? `<h3>La piscine est disponible ! 🏊🏼‍♀️✅</h3>` : `🏊🏼‍♀️❌` }`.

A noter, les backticks peuvent s'utiliser à plusieurs niveaux, dans la condition ternaire ils sont également accéssible pour s'éviter les concaténations.