Käytä 10 minuuttia ohjaustangon käytön aloittamiseen

Nykyään käyttöliittymän kehittäminen ei ole enää staattisten HTML-merkintöjen rakentamista ja SASS-tiedostojen kokoamista. Yhden sivun sovellusten (SPA) nousu tarkoittaa, että voimme tehdä paljon renderöintilogiikkaa asiakaspuolella. Nykypäivän verkkokehitys vaatii usein dynaamista tietojen syöttöä.

Vaikka React.js on loistava, se vaatii usein kehittäjiltä oppimiskäyrän, ennen kuin he voivat integroida sen tiimiin. Äskettäin tehtävänäni oli rakentaa kurssin verkkosivuston etupää. Se merkitsi aloitusta tutkimukselleni Handlebars.js: ään.

Ohjaustanko on suosittu ja yksinkertainen mallimoottori, jota on helppo käyttää. Se näyttää paljon tavalliselta HTML-koodilta, jossa on upotetut ohjaustangolausekkeet kiharoissa aaltosulkeissa {{}}.

{{name}}

{{quote}}

Ennen kuin siirrymme ohjaustankojen yksityiskohtiin, katsotaanpa, miten tiedot lisätään sivulle vanilja Javascriptin kautta. Otamme esimerkin verkkosivun rakentamisesta, jossa luetellaan muutama lainaus. Koska hei, kaikki tarvitsevat inspiraatiota.

Vanilja javascript

Tietojen haku

Suurimman osan ajasta saatat hakea tietoja ajaxin kautta, mutta yksinkertaisuuden vuoksi luomme oman dataobjektimme.

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

Luo HTML-merkintä

// index.html 

Tietojen lisääminen Javascriptilla

Käytämme a for loop -silmukkaa läpi yllä olevan sisällön.

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

Tällaisella koodilla on vaikea lukea ja tylsiä kirjoittaa. Ja tämän sivun HTML-merkinnät sijaitsevat nyt sekä index.html- että quotes.js-tiedostoissa.

Anna ohjaustanko

Päästä alkuun

Aloittamiseksi meidän on sisällytettävä ohjaustangon lähdekooditiedosto. Voit lisätä linkin otsikkotagin sisään tai ennen sen loppua.

Vaihtoehtoisesti voit linkittää ohjaustankoon myös CDN: stä.

Luo malli

Käytämme edelleen yllä olevan tiedoston lainausten dataobjektia. Ripottelemme ohjaustangon taikuutta index.html-tiedostoon.

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

{{name}}

{{quote}} {{/each}}
  • kukin : Iteroituu tietojen läpi
  • Tässä : R eferencesnykyiseen tilanteeseen.
  • text / x-handlebars-template : Käsketään selainta olemaan suorittamatta komentosarjaa normaalina Javascriptina.

Käännä malli ohjaustangolla

Tietojen kokoaminen ohjaustangolla vie vain muutaman rivin. Sitä rakastan siinä. Vaikka joku tiimistä ei ole aiemmin käyttänyt ohjaustankoa, käsikirjoitus ja merkinnät ovat heidän kannaltaan yksinkertaisia ​​ymmärtää ja poimia.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • content : Palauttaa elementin, johon haluat lisätä kootut tiedot.
  • 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

Kokemukseni ohjaustangosta on ollut myönteinen. Projektissani käytän sitä kulman ja metallisepän kanssa. Käytänkö sitä muihin projekteihin? Minusta on mieluummin jotain Reactia tai täysimittainen staattisten sivustojen generaattori, kuten Jekyll. Mutta tässä tapauksessa, kun joukkue on mukavampi HTML-merkintöjen kanssa ja se on suhteellisen yksinkertainen verkkosivusto, ohjaustanko on hyvä valinta.