# 127: Basisprincipes van JavaScript-sjablonen - CSS-trucs

Een sjabloon is een stuk HTML dat u op de pagina moet injecteren. Vaak worden sjablonen gemaakt aan de "serverzijde" - in die zin dat ze volledig gevormd naar het JavaScript komen en alleen in de DOM moeten worden geplaatst. Maar soms is dat niet haalbaar of zou het een extra retourvlucht naar de server vereisen, die misschien traag is. In dat geval is het ideaal om de sjabloon in JavaScript te hebben. Je kunt zeker een beetje string-aaneenschakeling doen door stukjes HTML en gegevens bij elkaar te voegen totdat je de sjabloon hebt die je nodig hebt. Maar dat is waarschijnlijk niet ideaal, omdat het de zorgen over gegevens en sjablonen niet scheidt. Echte JavaScript-sjablonen kunnen hier helpen.

In deze screencast behandelen we het basis 'waarom' van JavaScript-sjablonen en bespreken we specifiek een eenvoudig voorbeeld van hoe het wordt gedaan in Underscore.js. Daarna bespreken we enkele andere alternatieven.

Demo

var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);

Zie de Pen% = penName%> door Chris Coyier (@chriscoyier) op CodePen