# 127: Grunnleggende om JavaScript-mal - CSS-triks

En mal er en del av HTML som du trenger å injisere på siden. Ofte opprettes maler "serversiden" - ved at de kommer til JavaScript fullformet og bare trenger å bli satt inn i DOM. Men noen ganger er det ikke mulig eller vil kreve, og ekstra tur-retur serveren som kan være treg. I så fall er det ideelt å ha malen riktig i JavaScript. Du kan absolutt bare gjøre litt streng sammenføyning og legge sammen biter av HTML og data til du har malen du trenger. Men det er sannsynligvis ikke ideelt, da det ikke skiller bekymringene til data og mal. Ekte JavaScript-maler kan hjelpe her.

I denne skjermsendingen vil vi dekke det grunnleggende "hvorfor" for JavaScript-mal og deretter spesifikt dekke et enkelt eksempel på hvordan det gjøres i Underscore.js. Så dekker vi noen andre alternativer.

Demo

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

Se pennen% = penName%> av Chris Coyier (@chriscoyier) på CodePen