Brug 10 minutter på at komme i gang med styr

I dag handler front-end-udvikling ikke længere om at opbygge statisk HTML-markering og kompilering af SASS-filer. Stigningen af ​​SPA'er (Single Page Applications) betyder, at vi kan gøre meget af gengivelseslogikken på klientsiden. Moderne webudvikling kræver ofte dynamisk datainput.

Mens React.js er fantastisk, kræver det ofte en læringskurve for udviklerne, før de kan integrere det i teamet. For nylig fik jeg til opgave at opbygge frontenden af ​​et kursuswebsted. Det markerede starten på min udforskning i Handlebars.js.

Styr er en populær og enkel skabelonmotor, der er nem at bruge. Det ligner meget almindelig HTML med indlejrede styrudtryk i de krøllede seler {{}}.

{{name}}

{{quote}}

Før vi går videre til detaljerne i styrene, lad os se, hvordan data vil blive indsat på siden gennem vanilje Javascript. Vi tager eksemplet med at opbygge en webside, der viser et par citater. Fordi hej, alle har brug for inspiration.

Vanilje javascript

Data hentning

Det meste af tiden henter du muligvis data via ajax, men for enkelheds skyld opretter vi vores eget dataobjekt.

// quotes.js var quotes = [ {name: "Frank Lloyd Wright", quote: "You can use an eraser on the drafting table or a sledge hammer on the construction site."}, {name: "Douglas Adams", quote: "The major difference between a thing that might go wrong and a thing that cannot possibly go wrong is that when a thing that cannot possibly go wrong goes wrong it usually turns out to be impossible to get at or repair."}, {name: "Ettore Sottsass", quote: "I try and be as stupid as possible regarding my profession, which means I try to look at as few design magazines as possible."}, {name: "Shaun White", quote: "I’m a big fan of doing what you are really bad at. A lot."} ]

Opret HTML-markering

// index.html 

Tilføjelse af data med Javascript

Vi bruger en for- løkke til at løbe gennem indholdet ovenfor.

//quotes.jslet quoteMarkup = '';
for (var i = 0; i < quotes.length; i++) { let name = quotes[i].name, quote = quotes[i].quote;
quoteMarkup += ' ' + '
' + name + '
' + '

' + quote + '

' ' '}
document.getElementById('quotes').innerHTML = quoteMarkup;

Med kode som denne er det svært at læse og kedeligt at skrive. Og HTML-markeringen for denne side findes nu i både index.html og quotes.js.

Indtast styret

Kom godt i gang

For at starte skal vi medtage kildekodefilen til styret. Du kan tilføje linket inde i head tag eller inden udgangen af.

Alternativt kan du også linke til styr fra et CDN.

Opret skabelonen

Vi bruger stadig dataobjektet for citater fra filen ovenfor. Vi vil drysse nogle styremagi på index.html-filen.

//index.html 
 {{#each this}} 

{{name}}

{{quote}} {{/each}}
  • hver : Itererer gennem dataene
  • dette : R envisningertil den aktuelle kontekst.
  • text / x-handlebars-template : At fortælle browseren ikke at udføre scriptet som normalt Javascript.

Kompilér skabelonen med styr

Det tager kun et par linjer at kompilere dataene med styr. Det er det, jeg elsker ved det. Selvom nogen på holdet ikke har brugt styr før, er scriptet og markeringen meget enkle for dem at forstå og afhente.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • indhold : Returnerer det element, som du vil indsætte de kompilerede oplysninger i.
  • src: Retrieves the markup of the template.
  • Handlebars.compile(src): Compiles the template in use. It will return a function that the data can be passed to so it can be be rendered.
  • template(quotes): Compiles the data into the template.
  • content.innerHTML: Renders the above to the DOM

You can view the project here.

Bonus

I used Handlebars for a multiple-templates website. I found myself writing the same ajax and Handlebars code multiple times. So, here are the two functions that I created to make my life easier.

Getting data from ajax with Javascript

function ajaxGet(url, callback) { let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // console.log(xmlhttp.responseText); try { var data = JSON.parse(xmlhttp.responseText); } catch(err) { console.log(err.message +' Getting: ' + url); return; } callback(data); } };
xmlhttp.open("GET", url, true); xmlhttp.send();}

Function to run Handlebars

function runHandlebars(id, dataSrc, src) { if(document.getElementById(id) != null) { let content = document.getElementById(id); ajaxGet(dataSrc, function(data){ let source = document.getElementById(src).innerHTML, template = Handlebars.compile(source);
content.innerHTML = template(data); }); }}

With these two functions, I could run all my Handlebars code on a single Javascript file. It will look something like this.

runHandlebars('nav-sub-1', '/data/courses.json', 'nav-submenu-template');
runHandlebars('contributors', '/data/contributors.json', 'contributors-template');

Conclusion

Min erfaring med styr har været positiv. I mit projekt bruger jeg det med gulp og metalsmede. Vil jeg bruge det til andre projekter? Min opfattelse er, at jeg foretrækker noget som React eller en fuldgyldig statisk stedgenerator som Jekyll. Men i dette tilfælde, når holdet er mere fortrolig med HTML-markering, og det er et relativt simpelt websted, er håndtag et godt valg.