# 127: JavaScript-mallinnuksen perusteet - CSS-temppuja

Malli on pala HTML-koodia, joka sinun on lisättävä sivulle. Usein mallit luodaan "palvelinpuolella" - siinä mielessä, että ne tulevat täysin muodostettuun JavaScriptiin ja ne on vain asetettava DOM: iin. Mutta joskus se ei ole mahdollista tai vaatii ylimääräistä edestakaista lentoa palvelimelle, mikä saattaa olla hidasta. Siinä tapauksessa mallin käyttäminen suoraan JavaScriptissä on ihanteellinen. Voit varmasti tehdä vain jonon ketjutuksen lisäämällä yhteen bittiä HTML: ää ja dataa, kunnes sinulla on tarvittava malli. Mutta se ei todennäköisesti ole ihanteellinen, koska se ei erota tietojen ja mallin huolenaiheita. Todelliset JavaScript-mallit voivat auttaa tässä.

Tässä kuvakaappauksessa käsitellään JavaScript-mallien peruskysymyksiä ja sitten yksinkertainen esimerkki siitä, miten se tehdään Underscore.js-tiedostossa. Sitten käsitellään joitain muita vaihtoehtoja.

Demo

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

Katso Kynä% = penName%> kirjoittanut Chris Coyier (@chriscoyier) CodePenistä