Αφιερώστε 10 λεπτά για να ξεκινήσετε με το τιμόνι

Σήμερα η ανάπτυξη front-end δεν αφορά πλέον τη δημιουργία στατικής σήμανσης HTML και τη σύνταξη αρχείων SASS. Η άνοδος των Ενιαίων Σελίδων Εφαρμογών (SPA) σημαίνει ότι μπορούμε να κάνουμε πολλά από τη λογική απόδοσης από την πλευρά του πελάτη. Η σύγχρονη ανάπτυξη ιστού απαιτεί συχνά δυναμική εισαγωγή δεδομένων.

Ενώ το React.js είναι υπέροχο, συχνά απαιτεί καμπύλη εκμάθησης για τους προγραμματιστές προτού μπορέσουν να το ενσωματώσουν στην ομάδα. Πρόσφατα, μου ανέθεσαν να δημιουργήσω το front-end ενός ιστότοπου μαθημάτων. Αυτό σηματοδότησε την έναρξη της εξερεύνησής μου στο Handlebars.js.

Το τιμόνι είναι ένας δημοφιλής και απλός μηχανισμός templating που είναι απλός στη χρήση. Μοιάζει πολύ με το κανονικό HTML, με ενσωματωμένες εκφράσεις τιμονιού στις σγουρές τιράντες {{}}.

{{name}}

{{quote}}

Πριν προχωρήσουμε στις λεπτομέρειες του τιμονιού, ας δούμε πώς θα εισαχθούν δεδομένα στη σελίδα μέσω του Javascript της βανίλιας. Θα πάρουμε το παράδειγμα της δημιουργίας μιας ιστοσελίδας που περιέχει λίγα αποσπάσματα. Επειδή, όλοι χρειάζονται έμπνευση.

Javascript βανίλιας

Ανάκτηση δεδομένων

Τις περισσότερες φορές, ενδέχεται να ανακτάτε δεδομένα μέσω ajax, αλλά για απλότητα, θα δημιουργήσουμε το δικό μας αντικείμενο δεδομένων.

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

Δημιουργήστε σήμανση HTML

// index.html 

Προσθήκη δεδομένων με Javascript

Θα χρησιμοποιήσουμε ένα για βρόχο στο βρόχο μέσω του περιεχομένου παραπάνω.

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

Με αυτόν τον κωδικό, είναι δύσκολο να διαβάσετε και να κουράσετε να γράψετε. Και η σήμανση HTML για αυτήν τη σελίδα βρίσκεται τώρα τόσο στο index.html όσο και στο quotes.js.

Εισαγάγετε τιμόνι

Ξεκινώντας

Για να ξεκινήσουμε, πρέπει να συμπεριλάβουμε το αρχείο πηγαίου κώδικα του Handlebar. Μπορείτε να προσθέσετε τον σύνδεσμο μέσα στην επικεφαλίδα ή πριν από το τέλος του.

Alternatively, you can also link to Handlebars from a CDN.

Create the template

We will still use the data object of quotes from the file above. We will sprinkle some Handlebars magic on the index.html file.

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

{{name}}

{{quote}} {{/each}}
  • each: Iterates through the data
  • this: Referencesto the current context.
  • text/x-handlebars-template: To tell the browser not to execute the script as normal Javascript.

Compile the template with Handlebars

It only takes a few lines to compile the data with Handlebars. That is what I love about it. Even if someone on the team has not used Handlebars before, the script and markup are very simple for them to understand and pick up.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • content: Returns the element into which you want to insert the compiled information.
  • 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

Η εμπειρία μου με το τιμόνι ήταν θετική. Στο έργο μου, το χρησιμοποιώ με κόλπο και μέταλλο. Θα το χρησιμοποιήσω για άλλα έργα; Η λήψη μου είναι ότι προτιμώ κάτι σαν το React ή μια πλήρη γεννήτρια στατικών ιστότοπων όπως το Jekyll. Αλλά σε αυτήν την περίπτωση, όταν η ομάδα είναι πιο άνετη με σήμανση HTML και είναι ένας σχετικά απλός ιστότοπος, το Handlebars είναι μια καλή επιλογή.