Võtke juhtraua alustamiseks 10 minutit

Tänapäeval pole esiosa arendamine enam staatilise HTML-märgistuse loomine ja SASS-failide kompileerimine. Üheleheliste rakenduste (SPA) suurenemine tähendab, et saame palju teha renderdamisloogikat kliendipoolsel küljel. Tänapäeva veebiarendus nõuab sageli dünaamilist andmesisestust.

Kuigi React.js on suurepärane, nõuab see arendajatele sageli õppekõverat, enne kui nad saavad selle meeskonda integreerida. Hiljuti tehti mulle ülesandeks ehitada kursuse veebisaidi esiosa. Sellega algas minu uurimine saidil Handlebars.js.

Juhtraud on populaarne ja lihtne mallimootor, mida on lihtne kasutada. See näeb välja palju nagu tavaline HTML, mille lokkis sulgudes on sisseehitatud juhtraua avaldised {{}}.

{{name}}

{{quote}}

Enne kui jätkame juhtraua üksikasjadega, vaatame, kuidas vanill Javascripti kaudu lehele andmed sisestatakse. Võtame näiteks mõne hinnapakkumise loetava veebilehe ehitamise. Sest kuule, kõik vajavad inspiratsiooni.

Vanilli javascript

Andmete otsimine

Enamasti võidakse andmeid hankida ajaxi kaudu, kuid lihtsuse huvides loome oma andmeobjekti.

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

Looge HTML-i märgistus

// index.html 

Andmete lisamine Javascriptiga

Ülaltoodud sisu uurimiseks kasutame a for silmust.

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

Sellise koodiga on seda raske lugeda ja kirjutamine on tüütu. Selle lehe HTML-i märgistus asub nüüd nii index.html kui ka quotes.js.

Sisestage juhtrauda

Alustamine

Alustuseks peame lisama juhtraua lähtekoodi faili. Lingi saate lisada peatunnistuse sisse või enne lõppu.

Teise võimalusena saate linkida lenksu ka CDN-ist.

Looge mall

Kasutame endiselt ülaltoodud faili hinnapakkumiste andmeobjekti. Piserdame faili index.html natuke juhtraua maagiat.

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

{{name}}

{{quote}} {{/each}}
  • iga : kordub andmete kaudu
  • Selle : R Häälestuspraegusele kontekstile.
  • text / x-handlebars-template : brauseri käskimiseks mitte käivitada skripti tavalise Javascriptina.

Koostage mall juhtraua abil

Andmete koostamiseks juhtraua abil kulub vaid paar rida. Seda ma armastan selle juures. Isegi kui keegi meeskonnast pole varem juhtrauda kasutanud, on skript ja märgistus nende mõistmiseks ja ülesvõtmiseks väga lihtsad.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • sisu : tagastab elemendi, kuhu soovite koostatud teabe sisestada.
  • 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

Minu kogemus juhtraua osas on olnud positiivne. Oma projektis kasutan seda koos lonksu ja metallsepaga. Kas ma kasutan seda teiste projektide jaoks? Minu meelest eelistan midagi sellist nagu React või täieõiguslikku staatiliste saitide generaatorit nagu Jekyll. Kuid sel juhul, kui meeskonnal on HTML-i märgistusega mugavam ja see on suhteliselt lihtne veebisait, on juhtraud hea valik.