Skirkite 10 minučių, kad pradėtumėte vairą

Šiais laikais „front-end“ kūrimas nebėra statinio HTML žymėjimo kūrimas ir SASS failų sudarymas. Vieno puslapio programų (SPA) augimas reiškia, kad kliento pusėje galime atlikti daug pateikimo logikos. Šių dienų interneto svetainių kūrimas dažnai reikalauja dinamiško duomenų įvedimo.

Nors „React.js“ yra puikus, dažnai kūrėjams reikia mokymosi kreivės, kad jie galėtų integruoti ją į komandą. Neseniai man buvo pavesta sukurti kurso svetainės priekinę dalį. Tai buvo mano „Handlebars.js“ paieškos pradžia.

Vairas yra populiarus ir paprastas šablonų variklis, kurį paprasta naudoti. Tai panašu į įprastą HTML su garbanotosiose petnešose įterptomis vairo išraiškomis {{}}.

{{name}}

{{quote}}

Prieš pereidami prie vairo informacijos, pažiūrėkime, kaip duomenys bus įterpti į puslapį per „vanilla Javascript“. Mes imsimės tinklalapio, kuriame pateikiamos kelios citatos, kūrimo pavyzdžio. Nes, ei, visiems reikia šiek tiek įkvėpimo.

Vanilinis javascript

Duomenų paieška

Dažniausiai galite gauti duomenis per ajax, tačiau paprastumo sumetimais sukursime savo duomenų 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."} ]

Sukurkite HTML žymėjimą

// index.html 

Duomenų pridėjimas naudojant „Javascript“

Norėdami pasinaudoti aukščiau esančiu turiniu, naudosime „ for loop“.

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

Su tokiu kodu sunku skaityti ir varginti rašyti. Šio puslapio HTML žymėjimas dabar yra ir index.html, ir quotes.js.

Įveskite vairą

Darbo pradžia

Norėdami pradėti, turime įtraukti rankenos šaltinio kodo failą. Nuorodą galite pridėti ant galvos žymos arba iki jos pabaigos.

Taip pat galite susieti su vairu iš CDN.

Sukurkite šabloną

Mes vis tiek naudosime citatą iš aukščiau esančio failo duomenų objektą. Faile index.html pabarstysime šiek tiek vairo magijos.

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

{{name}}

{{quote}} {{/each}}
  • kiekvienas : kartojasi per duomenis
  • tai : R eferencesatsižvelgiant į dabartinį kontekstą.
  • text / x-handlebars-template : Nurodyti naršyklei nevykdyti scenarijaus kaip įprasto „Javascript“.

Sudarykite šabloną su vairu

Norint surinkti duomenis su vairu reikia tik kelių eilučių. Man tai patinka. Net jei kas nors iš komandos anksčiau nenaudojo vairo, scenarijų ir žymėjimą jiems suprasti ir paimti yra labai paprasta.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • turinys : pateikia elementą, į kurį norite įterpti surinktą informaciją.
  • 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

Mano patirtis su vairu buvo teigiama. Savo projekte aš jį naudoju su gurkšniu ir metalų kalviu. Ar naudosiu jį kitiems projektams? Manau, kad man labiau patinka kažkas panašaus į „React“ arba visavertis statinių svetainių generatorius, pvz., „Jekyll“. Tačiau šiuo atveju, kai komandai patogiau naudoti HTML žymėjimą ir tai yra gana paprasta svetainė, vairas yra geras pasirinkimas.