Ένα πρότυπο είναι ένα κομμάτι HTML που πρέπει να εισαγάγετε στη σελίδα. Συχνά δημιουργούνται πρότυπα "πλευρά διακομιστή" - καθώς έρχονται στο JavaScript πλήρως διαμορφωμένο και απλά πρέπει να τοποθετηθούν στο DOM. Αλλά μερικές φορές αυτό δεν είναι εφικτό ή θα απαιτούσε και επιπλέον μετ 'επιστροφής στον διακομιστή που μπορεί να είναι αργός. Σε αυτήν την περίπτωση, το να έχετε το πρότυπο απευθείας σε JavaScript είναι ιδανικό. Μπορείτε σίγουρα να κάνετε λίγη συνένωση συμβολοσειρών προσθέτοντας κομμάτια HTML και δεδομένων έως ότου έχετε το πρότυπο που χρειάζεστε. Αλλά αυτό πιθανότατα δεν είναι ιδανικό καθώς δεν διαχωρίζει τις ανησυχίες των δεδομένων και του προτύπου. Το πραγματικό πρότυπο JavaScript μπορεί να βοηθήσει εδώ.
Σε αυτό το σενάριο θα καλύψουμε το βασικό «γιατί» του templat JavaScript και μετά θα καλύψουμε συγκεκριμένα ένα απλό παράδειγμα του πώς γίνεται στο Underscore.js. Τότε θα καλύψουμε κάποιες άλλες εναλλακτικές λύσεις.
Διαδήλωση
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Δείτε το Pen% = penName%> από τον Chris Coyier (@chriscoyier) στο CodePen
Συνδέσεις
- Βασική επίδειξη στο CodePen
- Πρότυπο Underscore.js
- NetTuts: Βέλτιστες πρακτικές όταν εργάζεστε με πρότυπα JavaScript
- MDN: Πρότυπα JavaScript
- John Resig: JavaScript Micro-Templating
- James Padolsey: Ευθυγράμμιση