Vi dækkede skabeloner med styr i den sidste video. Men styr er ikke den eneste skabelonløsning på blokken. I denne video bruger vi den skabelon, der er tilgængelig i Underscore.
Hvorfor? En af grundene er, at du måske allerede bruger Underscore på dit projekt. Det er et ekstremt populært bibliotek, fordi det ligesom jQuery giver en masse nyttige metoder, der fungerer på tværs af browsere. Som de siger:
Det er slips at gå sammen med jQuery's tux og Backbone.js's seler.
Hvis du allerede bruger understregning, ville det være et stort incitament til at bruge det til skabeloner.
Også i min hurtige test er styr 1.0.0 14,2 KB gzippet og minificeret og Underscore er 4,9 KB gzippet og minificeret. Styr har simpelthen flere funktioner (f.eks. Kommentarer, sløjfer, stier, logik osv.). I vores enkle demo har vi ikke brug for disse funktioner alligevel, så det er ikke ligefrem en rimelig sammenligning, men åh, vi lærer bare.
I stedet for at have skabelonen i HTML, er vi nødt til at definere understregningsskabeloner i JavaScript. Vi er tilbage til en streng sammenkædning.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledbliver derefter til en funktion, som vi kan ringe til med vores dataobjektkontekst og returnerer HTML-fyldt alle med de data. For at være effektiv skal vi sammenkæde HTML'en, der vender tilbage til en stor streng, så vi kun kan tilføje den til DOM:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);I denne video abstraherede vi også hentningen af dataene. Vi oprettede en JSON-kilde og brugte jQuerys $ .getJSON () -funktion til at få den. Som vi sandsynligvis skulle gøre i det "virkelige liv".
$.getJSON("/path/to/json.js", function(data) ( ));Vores for loop og sådan, der er afhængig af disse data, findes i tilbagekaldet der. Eller mere sandsynligt, kalder en anden velkendt funktion til at håndtere det og holder tingene rent adskilt.
Her endte vi:
Se Pen IpAdn af Chris Coyier (@chriscoyier) på CodePen
Det skal bemærkes, at LoDash er 100% kompatibel med det, vi har gjort her. Jeg er ikke helt sikker på, om LoDash-skabeloner er bedre / hurtigere / langsommere / dårligere end Underscore, men jeg byttede bibliotekerne ud, og demoen fungerede fint.