In de laatste video hebben we sjablonen met sturen behandeld. Maar het stuur is niet de enige sjabloonoplossing in de buurt. In deze video gebruiken we de sjablonen die beschikbaar zijn in Underscore.
Waarom? Een reden is dat u misschien al Underscore op uw project gebruikt. Het is een extreem populaire bibliotheek omdat het, net als jQuery, een heleboel handige methoden biedt die cross-browser werken. Zoals ze zeggen:
Het is de stropdas die past bij de smoking van jQuery en de bretels van Backbone.js.
Als u Underscore al gebruikt, zou dat een grote stimulans zijn om de sjabloon te gebruiken.
Ook in mijn snelle tests is Handlebars 1.0.0 14,2 KB gzipped en verkleind en Underscore is 4,9 KB gzipped en verkleind. Het stuur heeft gewoon meer functies (bijv. Commentaar, loops, paden, logica, enz.). In onze eenvoudige demo hebben we die functies toch niet nodig, dus het is niet bepaald een eerlijke vergelijking, maar ach, we leren gewoon.
In plaats van de sjabloon in de HTML te hebben, moeten we underscore-sjablonen in JavaScript definiëren. We zijn terug bij een aaneenschakeling van tekenreeksen.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledverandert dan in een functie die we kunnen aanroepen met onze gegevensobjectcontext en retourneert de HTML die helemaal is ingevuld met die gegevens. Om efficiënt te zijn, gaan we de HTML die terugkeert in één grote string samenvoegen, zodat we deze slechts één keer aan de DOM kunnen toevoegen:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);In deze video hebben we ook het verkrijgen van de gegevens weggenomen. We hebben een JSON-bron gemaakt en de $ .getJSON () -functie van jQuery gebruikt om deze op te halen. Zoals we waarschijnlijk zouden moeten doen in het "echte leven".
$.getJSON("/path/to/json.js", function(data) ( ));Onze for-lus en dergelijke die afhankelijk is van die gegevens, gaat daar in de callback. Of, waarschijnlijker, roept een andere functie met een goede naam aan om dat af te handelen, door de dingen netjes gescheiden te houden.
Hier zijn we terechtgekomen:
Zie de Pen IpAdn van Chris Coyier (@chriscoyier) op CodePen
Opgemerkt moet worden dat LoDash 100% compatibel is met wat we hier hebben gedaan. Ik weet niet zeker of LoDash-sjablonen beter / sneller / langzamer / slechter zijn dan die van Underscore, maar ik heb de bibliotheken verwisseld en de demo werkte prima.