Szánjon 10 percet a kormány használatának megkezdéséhez

Manapság a front-end fejlesztés már nem a statikus HTML jelölések felépítéséről és a SASS fájlok fordításáról szól. Az Single Page Applications (SPA) növekedése azt jelenti, hogy a renderelési logikából sokat megtehetünk a kliens oldalon. A mai webfejlesztés gyakran dinamikus adatbevitelt igényel.

Bár a React.js nagyszerű, gyakran tanulási görbét igényel a fejlesztők számára, mielőtt integrálhatnák a csapatba. Nemrégiben azt a feladatot kaptam, hogy elkészítsem egy tanfolyam weboldalát. Ezzel megkezdődött a Handlebars.js fájl felfedezése.

A kormány egy népszerű és egyszerű sablonmotor, amely egyszerűen használható. Nagyon hasonlít a szokásos HTML-re, a göndör zárójelben beágyazott kormánykifejezések vannak {{}}.

{{name}}

{{quote}}

Mielőtt továbblépnénk a kormányrészlet részleteire, nézzük meg, hogyan kerülnek be az adatok az oldalba a vanília Javascripten keresztül. Példát fogunk venni egy weboldal létrehozására, amely néhány idézetet felsorol. Mert, hé, mindenkinek szüksége van némi inspirációra.

Vanília javascript

Adatok lehívása

Legtöbbször előfordulhat, hogy az adatokat ajax-on keresztül tölti le, de az egyszerűség kedvéért létrehozzuk a saját adatobjektumunkat.

// 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."} ]

Hozzon létre HTML jelölést

// index.html 

Adatok hozzáadása Javascript-tel

A for ciklust használjuk a fenti tartalom végigvezetéséhez.

//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;

Ilyen kóddal nehezen olvasható és unalmas írni. Ennek az oldalnak a HTML-jelölése pedig mind az index.html, mind az quotes.js fájlban található.

Adja meg a kormányt

Elkezdeni

A kezdéshez be kell vonnunk a kormánysáv forráskód fájlját. Hozzáadhatja a linket a fejcímke belsejébe vagy a vége elé.

Alternatív megoldásként hivatkozhat a kormányra egy CDN-ről is.

Hozza létre a sablont

Továbbra is a fenti fájl idézeteinek adatobjektumát fogjuk használni. Meghintjük a kormányvarázslatokat az index.html fájlban.

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

{{name}}

{{quote}} {{/each}}
  • mindegyik : Iterál az adatokon keresztül
  • e : R eferencesa jelenlegi kontextushoz.
  • text / x-handlebars-template : Mondja meg a böngészőnek, hogy ne hajtsa végre a parancsfájlt normál Javascript-ként.

Fordítsa le a sablont a kormány segítségével

Csak néhány sor szükséges az adatok összeállításához a kormány segítségével. Ezt szeretem benne. Még akkor is, ha valaki a csapatból korábban nem használta a kormányt, a szkript és a jelölés nagyon egyszerű megérteni és felvenni őket.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • tartalom : Visszaadja azt az elemet, amelybe be akarja illeszteni az összeállított információkat.
  • 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

My experience with Handlebars has been a positive one. In my project, I use it with gulp and metalsmith. Will I use it for other projects? My take is I prefer something like React or a full fledged static site generator like Jekyll. But in this case, when the team is more comfortable with HTML markup and it is a relatively simple website, Handlebars is a good choice.