Začíname s riadidlami trvať 10 minút

Dnešný front-end vývoj už nie je o vytváraní statických značiek HTML a kompilácii súborov SASS. Rast jednostránkových aplikácií (SPA) znamená, že môžeme urobiť veľa vykresľovacej logiky na strane klienta. Moderný vývoj webu často vyžaduje dynamické zadávanie údajov.

Aj keď je súbor React.js vynikajúci, často vyžaduje, aby sa vývojári predtým, ako ho môžu integrovať do tímu, učiť. Nedávno som dostal za úlohu vytvoriť front-end webstránky pre kurzy. To znamenalo začiatok môjho prieskumu Handlebars.js.

Riadidlá je populárny a jednoduchý šablónový motor, ktorý sa ľahko používa. Vyzerá veľmi podobne ako bežný kód HTML s vloženými výrazmi riadidiel v zložených zátvorkách {{}}.

{{name}}

{{quote}}

Predtým, ako prejdeme k podrobnostiam o riadidlách, pozrime sa, ako sa budú údaje vkladať na stránku pomocou vanilkového kódu Javascript. Vezmeme si príklad vytvorenia webovej stránky, ktorá obsahuje niekoľko úvodzoviek. Pretože, hej, každý potrebuje nejakú inšpiráciu.

Vanilkový javascript

Získavanie údajov

Väčšinou môžete dáta načítať cez ajax, ale pre zjednodušenie si vytvoríme vlastný dátový objekt.

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

Vytvorte značky HTML

// index.html 

Pridávanie údajov pomocou Javascript

Na opakovanie vyššie uvedeného obsahu použijeme slučku for .

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

Pri takomto kóde je ťažké ho čítať a písať ho nudne. Značka HTML pre túto stránku sa teraz nachádza v index.html aj quotes.js.

Zadajte riadidlá

Začíname

Na začiatok musíme zahrnúť súbor zdrojového kódu riadidiel. Odkaz môžete pridať do hlavovej značky alebo pred koniec roku.

Prípadne môžete tiež prepojiť riadidlá z CDN.

Vytvorte šablónu

Stále budeme používať údajový objekt ponúk z vyššie uvedeného súboru. Do súboru index.html posypeme trochu kúzla riadidiel.

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

{{name}}

{{quote}} {{/each}}
  • each : Iterates through the data
  • toto : R eferencesdo súčasného kontextu.
  • text / x-handlebars-template : Povedať prehliadaču, aby skript nespúšťal ako normálny Javascript.

Zostavte šablónu s riadidlami

Na zostavenie údajov pomocou riadidiel je potrebných iba niekoľko riadkov. To je to, čo na tom milujem. Aj keď niekto z tímu predtým nepoužíval riadidlá, scenár a označenie sú pre neho veľmi jednoduché na pochopenie a pochopenie.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • obsah : Vráti prvok, do ktorého chcete vložiť skompilované informácie.
  • 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

Moje skúsenosti s riadidlami boli pozitívne. Vo svojom projekte ho používam s hltom a hutníctvom. Použijem to na ďalšie projekty? Môj názor je, že uprednostňujem niečo ako React alebo plnohodnotný statický generátor stránok, ako je Jekyll. Ale v tomto prípade, keď je tímu viac vyhovujúce značenie HTML a jedná sa o pomerne jednoduchý web, sú Handlebars dobrou voľbou.