Vi dekket mal med håndtak i den siste videoen. Men styr er ikke den eneste malløsningen på blokken. I denne videoen bruker vi malene som er tilgjengelige i Underscore.
Hvorfor? En grunn er at du kanskje allerede bruker Underscore på prosjektet ditt. Det er et ekstremt populært bibliotek fordi det, som jQuery, gir en rekke nyttige metoder som fungerer i tvers av nettlesere. Som de sier:
Det er slipsen å gå sammen med jQuery's tux, og Backbone.js's seler.
Hvis du allerede bruker Underscore, vil det være et stort insentiv til å bruke malene.
Også i min raske testing er styrene 1.0.0 14,2 KB gzippet og minifisert og Underscore er 4,9 KB gzipped og minified. Styret har rett og slett flere funksjoner (f.eks. Kommentarer, sløyfer, baner, logikk osv.). I vår enkle demo trenger vi ikke disse funksjonene uansett, så det er ikke akkurat en rettferdig sammenligning, men vel, vi lærer bare.
I stedet for å ha malen i HTML, må vi definere Underscore maler i JavaScript. Vi er tilbake til en streng sammenkobling.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledblir deretter til en funksjon vi kan kalle med dataobjektkonteksten og returnerer HTML-filen som er fylt ut med dataene. For å være effektiv, skal vi sammenkoble HTML-en som returnerer til en stor streng, slik at vi kan legge den til DOM bare en gang:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);I denne videoen abstraherte vi også innhentingen av dataene. Vi opprettet en JSON-kilde, og brukte jQuerys $ .getJSON () -funksjon for å få den. Som vi sannsynligvis måtte gjøre i det "virkelige liv".
$.getJSON("/path/to/json.js", function(data) ( ));Vår for loop og slikt som er avhengig av dataene, går i tilbakeringingen der. Eller mer sannsynlig, kaller en annen velkjent funksjon for å håndtere det, og holder ting rent atskilt.
Her havnet vi:
Se Pen IpAdn av Chris Coyier (@chriscoyier) på CodePen
Det skal bemerkes at LoDash er 100% kompatibel med det vi har gjort her. Jeg er ikke helt sikker på om LoDash-mal er noe bedre / raskere / tregere / dårligere enn Underscore, men jeg byttet ut bibliotekene og demoen fungerte helt fint.