Un modèle est un morceau de HTML que vous devez injecter sur la page. Souvent, les modèles sont créés «côté serveur» - en ce sens qu'ils arrivent au JavaScript entièrement formé et doivent simplement être placés dans le DOM. Mais parfois, cela n'est pas faisable ou nécessiterait un aller-retour supplémentaire vers le serveur, ce qui pourrait être lent. Dans ce cas, avoir le modèle directement en JavaScript est idéal. Vous pouvez certainement faire un peu de concaténation de chaînes en ajoutant des bits de HTML et de données jusqu'à ce que vous ayez le modèle dont vous avez besoin. Mais ce n'est probablement pas idéal car cela ne sépare pas les préoccupations des données et du modèle. La création de modèles JavaScript réels peut vous aider ici.
Dans ce screencast, nous couvrirons le «pourquoi» de base de la création de modèles JavaScript, puis nous couvrirons spécifiquement un exemple simple de la façon dont cela est fait dans Underscore.js. Ensuite, nous aborderons d'autres alternatives.
Démo
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Voir le Pen% = penName%> de Chris Coyier (@chriscoyier) sur CodePen
Liens
- Démo de base sur CodePen
- Modèles Underscore.js
- NetTuts: Meilleures pratiques lors de l'utilisation de modèles JavaScript
- MDN: modèles JavaScript
- John Resig: Micro-modèles JavaScript
- James Padolsey: Interplation directe