Nous nous sommes arrêtés dans la dernière vidéo avec un peu de désordre. Dans un seul bloc de JavaScript, nous combinions la récupération de données, l'affichage et la logique métier, et la création de modèles. Dans cette vidéo, nous allons commencer à décomposer ces choses pour nous mettre sur la voie d'un code plus organisé, maintenable et compréhensible. Une grande partie de cela est la création de modèles.
Prenez le n ° 1 de notre aventure de création de modèles avec Handlebars. Handlebars a une approche intelligente dans la mesure où le HTML du modèle est littéralement placé dans le HTML. Vous utilisez une balise spéciale . Cela rend la création agréable car nous pouvons nous éloigner de la maladresse de la concaténation de chaînes (toutes ces guillemets et avantages) et obtenir la belle coloration syntaxique pour HTML fournie par votre éditeur. Notre modèle ressemblait finalement à ceci:
((movieTitle))
((movieDirector))
Notez l' typeattribut bizarre sur la balise de script. Cela empêche le contenu de cette balise de s'exécuter. En fin de compte, Handlebars arrache simplement les tripes de cette balise et la transforme en une fonction de modèle. Une manière assez intelligente de le gérer vraiment.
Ces bits comme ((movieTitle))sont les parties importantes. Nous passons finalement un objet à la fonction de modèle qui est créée, et les propriétés de cet objet correspondent à ces bits d'espace réservé. Le guidon est appelé guidon, vraisemblablement, parce que ces bits d'espace réservé sont entourés d'accolades qui ressemblent un peu à un guidon d'en haut.
En suivant le simple tutoriel sur le site Web de Handlebars, nous créons notre fonction de création de modèles comme ceci:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Ensuite, dans notre forboucle, nous appelons notre nouvelle fonction de création de modèles avec l'objet (le contexte) qui contient un seul film. Le HTML sera renvoyé et nous l'ajoutons à la page.
var html = template(data.movies(i)); $("#movies").append(html);Nous prenons également le modèle de cette vidéo et le filmons sur un autre stylo. Cela signifie simplement comment vous pourriez briser votre propre code dans un vrai projet. Le modèle serait presque certainement une sorte d '«inclusion».
Voici où nous nous sommes retrouvés:
Voir le Pen mdCjJ de Chris Coyier (@chriscoyier) sur CodePen
Nous avons fait de bons progrès vers un meilleur code, mais il nous reste encore beaucoup à faire pour le rendre parfaitement propre.