En mall är en bit HTML som du behöver injicera på sidan. Ofta skapas mallar "serversidan" - genom att de kommer till JavaScript helt utformade och bara behöver läggas in i DOM. Men ibland är det inte möjligt eller skulle kräva och extra rundresa till servern som kan vara långsam. I så fall är det perfekt att ha mallen rätt i JavaScript. Du kan säkert bara göra lite strängkompatering och lägga ihop bitar av HTML och data tills du har den mall du behöver. Men det är troligtvis inte perfekt eftersom det inte skiljer data och mall oro. Verklig JavaScript-mall kan hjälpa till här.
I denna screencast kommer vi att täcka det grundläggande "varför" med JavaScript-mallar och sedan specifikt täcka ett enkelt exempel på hur det görs i Underscore.js. Sedan täcker vi några andra alternativ.
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%> av Chris Coyier (@chriscoyier) på CodePen
Länkar
- Grundläggande demo på CodePen
- Underscore.js-mallar
- NetTuts: Bästa praxis när du arbetar med JavaScript-mallar
- MDN: JavaScript-mallar
- John Resig: JavaScript Micro-Templating
- James Padolsey: Straight-up interplation