# 127: Grundlæggende om JavaScript-skabeloner - CSS-tricks

Anonim

En skabelon er et stykke HTML, som du skal indsprøjte på siden. Ofte oprettes skabeloner "serversiden" - ved at de kommer til JavaScript fuldt dannet og bare skal sættes i DOM. Men nogle gange er det ikke muligt eller ville kræve og ekstra rundtur til serveren, som måske er langsom. I så fald er det ideelt at have skabelonen lige i JavaScript. Du kan helt sikkert bare lave en smule strengkombination sammenlægge bits af HTML og data, indtil du har den skabelon, du har brug for. Men det er sandsynligvis ikke ideelt, da det ikke adskiller bekymringerne ved data og skabelon. Ægte JavaScript-skabeloner kan hjælpe her.

I denne screencast dækker vi det grundlæggende "hvorfor" i JavaScript-skabeloner og dækker specifikt et simpelt eksempel på, hvordan det gøres i Underscore.js. Så dækker vi nogle 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 Pen% = penName%> af Chris Coyier (@chriscoyier) på CodePen

Links

  • Grundlæggende demo om CodePen
  • Underscore.js skabeloner
  • NetTuts: Bedste fremgangsmåder, når du arbejder med JavaScript-skabeloner
  • MDN: JavaScript-skabeloner
  • John Resig: JavaScript Micro-Templating
  • James Padolsey: Straight-up interplation