Vi täckte mallar med styr i den senaste videon. Men Handbars är inte den enda malllösningen på blocket. I den här videon använder vi mallarna som finns i Underscore.
Varför? En anledning är att du kanske redan använder Underscore på ditt projekt. Det är ett extremt populärt bibliotek eftersom det, precis som jQuery, ger en massa användbara metoder som fungerar i webbläsare. Som de säger:
Det är slipsen att gå med jQuerys tux och Backbone.js hängslen.
Om du redan använder Underscore, skulle det vara ett stort incitament att använda dess mallar.
Också i min snabba testning är Handbars 1.0.0 14,2 KB gzippad och minifierad och Underscore är 4,9 KB gzippad och minifierad. Styr har helt enkelt fler funktioner (t.ex. kommentarer, slingor, banor, logik, etc). I vår enkla demo behöver vi inte de här funktionerna ändå, så det är inte precis en rättvis jämförelse, men jaha, vi lär oss bara.
I stället för att ha mallen i HTML, måste vi definiera understrykningsmallar i JavaScript. Vi är tillbaka till en strängkedjning.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledförvandlas sedan till en funktion som vi kan ringa med vårt dataobjektkontext och returnerar HTML-filen som alla är fyllda med den informationen. För att vara effektiv ska vi sammanfoga HTML-filen som återgår till en stor sträng så att vi kan lägga till den i DOM bara en gång:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);I den här videon tog vi också bort hämtningen av data. Vi skapade en JSON-källa och använde jQuerys $ .getJSON () -funktion för att få den. Som vi antagligen skulle behöva göra i det "verkliga livet".
$.getJSON("/path/to/json.js", function(data) ( ));Vår för loop och sådant som förlitar sig på den informationen finns i återuppringningen där. Eller mer sannolikt, kallar någon annan väl namngiven funktion för att hantera det och håller sakerna rena.
Här hamnade vi:
Se Pen IpAdn av Chris Coyier (@chriscoyier) på CodePen
Det bör noteras att LoDash är 100% kompatibel med vad vi har gjort här. Jag är inte helt säker på om LoDash-mallar är bättre / snabbare / långsammare / sämre än Underscore, men jag bytte ut biblioteken och demo fungerade bra.