Στο τελευταίο βίντεο καλύψαμε templating με τιμόνι. Αλλά το Handlebars δεν είναι η μόνη λύση templating στο μπλοκ. Σε αυτό το βίντεο θα χρησιμοποιήσουμε το πρότυπο που είναι διαθέσιμο στο Underscore.
Γιατί; Λοιπόν ένας λόγος είναι ότι ίσως χρησιμοποιείτε ήδη το Underscore στο έργο σας. Είναι μια εξαιρετικά δημοφιλής βιβλιοθήκη γιατί, όπως το jQuery, παρέχει πολλές χρήσιμες μεθόδους που λειτουργούν μεταξύ των προγραμμάτων περιήγησης. Οπως λένε:
Είναι η ισοπαλία να ταιριάζει με το σμόκιν του jQuery και τις ζαρτιέρες του Backbone.js.
Εάν χρησιμοποιείτε ήδη το Underscore, αυτό θα ήταν μεγάλο κίνητρο για τη χρήση του templating.
Επίσης, στη γρήγορη δοκιμή μου, το Handlebars 1.0.0 είναι 14,2 KB gzip και ελαχιστοποιημένο και το Underscore είναι 4,9 KB gzipped και ελαχιστοποιήθηκε. Το Handlebars έχει απλά περισσότερες δυνατότητες (π.χ. σχολιασμός, βρόχους, διαδρομές, λογική κ.λπ.). Στην απλή μας επίδειξη, δεν χρειαζόμαστε ούτως ή άλλως αυτές τις λειτουργίες, οπότε δεν είναι ακριβώς μια δίκαιη σύγκριση, αλλά καλά μαθαίνουμε.
Αντί να έχουμε το πρότυπο σε HTML, πρέπει να ορίσουμε πρότυπα υπογράμμισης στο JavaScript. Επιστρέφουμε σε κάποια συνένωση συμβολοσειρών.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledστη συνέχεια μετατρέπεται σε μια συνάρτηση που μπορούμε να καλέσουμε με το περιβάλλον αντικειμένου δεδομένων μας και επιστρέφει το HTML που έχει συμπληρωθεί με αυτά τα δεδομένα. Για να είμαστε αποτελεσματικοί, πρόκειται να συνενώσουμε το HTML που επιστρέφει σε μια μεγάλη συμβολοσειρά, ώστε να το προσαρτήσουμε στο DOM μόνο μία φορά:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Σε αυτό το βίντεο αφαιρέσαμε επίσης τη λήψη των δεδομένων. Δημιουργήσαμε μια πηγή JSON και χρησιμοποιήσαμε τη συνάρτηση $ .getJSON () του jQuery για να την αποκτήσουμε. Όπως θα έπρεπε πιθανώς να κάνουμε στην «πραγματική ζωή».
$.getJSON("/path/to/json.js", function(data) ( ));Το δικό μας βρόχο και αυτό που βασίζεται σε αυτά τα δεδομένα πηγαίνει στην επιστροφή κλήσεων εκεί. Ή πιο πιθανό, καλεί κάποια άλλη γνωστή λειτουργία για να το χειριστεί, διατηρώντας τα πράγματα καθαρά χωριστά.
Εδώ καταλήξαμε:
Δείτε το Pen IpAdn του Chris Coyier (@chriscoyier) στο CodePen
Πρέπει να σημειωθεί ότι το LoDash είναι 100% συμβατό με αυτό που κάναμε εδώ. Δεν είμαι απόλυτα σίγουρος αν το templating LoDash είναι καλύτερο / ταχύτερο / πιο αργό / χειρότερο από το Underscore's, αλλά αλλάξα τις βιβλιοθήκες και το demo λειτούργησε καλά.