Nous avons couvert la création de modèles avec Handlebars dans la dernière vidéo. Mais Handlebars n'est pas la seule solution de modélisation sur le bloc. Dans cette vidéo, nous utiliserons les modèles disponibles dans Underscore.
Pourquoi? Eh bien, une des raisons est que vous utilisez peut-être déjà Underscore sur votre projet. C'est une bibliothèque extrêmement populaire car, comme jQuery, elle fournit un tas de méthodes utiles qui fonctionnent entre les navigateurs. Comme ils disent:
C'est la cravate qui va avec le smoking de jQuery et les bretelles de Backbone.js.
Si vous utilisez déjà Underscore, ce serait une grande incitation à utiliser son modèle.
Également dans mes tests rapides, Handlebars 1.0.0 est de 14,2 Ko gzippé et minifié et Underscore est de 4,9 Ko gzippé et minifié. Le guidon a simplement plus de fonctionnalités (par exemple, les commentaires, les boucles, les chemins, la logique, etc.). Dans notre démo simple, nous n'avons de toute façon pas besoin de ces fonctionnalités, donc ce n'est pas exactement une comparaison juste, mais bon, nous ne faisons qu'apprendre.
Plutôt que d'avoir le modèle dans le HTML, nous devons définir des modèles de soulignement dans le JavaScript. Nous sommes de retour à une concaténation de chaînes.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledse transforme ensuite en une fonction que nous pouvons appeler avec notre contexte d'objet de données et renvoie le HTML tout rempli avec ces données. Pour être efficace, nous allons concaténer le HTML qui revient en une seule grande chaîne afin de pouvoir l'ajouter au DOM une seule fois:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Dans cette vidéo, nous avons également fait abstraction de l'obtention des données. Nous avons créé une source JSON et utilisé la fonction $ .getJSON () de jQuery pour l'obtenir. Comme il faudrait probablement le faire dans la «vraie vie».
$.getJSON("/path/to/json.js", function(data) ( ));Notre boucle for et autres qui reposent sur ces données vont dans le rappel là-bas. Ou plus probablement, appelle une autre fonction bien nommée pour gérer cela, en gardant les choses bien séparées.
Voici où nous nous sommes retrouvés:
Voir le Pen IpAdn de Chris Coyier (@chriscoyier) sur CodePen
Il convient de noter que LoDash est 100% compatible avec ce que nous avons fait ici. Je ne suis pas tout à fait sûr que le modèle LoDash soit meilleur / plus rapide / plus lent / pire que celui d'Underscore, mais j'ai échangé les bibliothèques et la démo a très bien fonctionné.