Un șablon este o bucată de HTML pe care trebuie să o injectați pe pagină. Adesea șabloanele sunt create „partea serverului” - în sensul că ajung la JavaScript complet format și trebuie doar să fie introduse în DOM. Dar, uneori, acest lucru nu este fezabil sau ar necesita și o călătorie suplimentară la server care ar putea fi lentă. În acest caz, este ideal să aveți șablonul chiar în JavaScript. Puteți face cu siguranță un pic de concatenare de șiruri adăugând biți de HTML și date până când aveți șablonul de care aveți nevoie. Dar acest lucru probabil nu este ideal, deoarece nu separă preocupările de date și șablon. Șablonarea JavaScript reală vă poate ajuta aici.
În acest screencast vom acoperi „de ce” de bază al șablonării JavaScript și apoi vom acoperi în mod specific un exemplu simplu de cum se face în Underscore.js. Apoi vom acoperi câteva alte alternative.
Demo
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Vedeți Pen% = penName%> de Chris Coyier (@chriscoyier) pe CodePen
Link-uri
- Demo de bază pe CodePen
- Șablonare Underscore.js
- NetTuts: cele mai bune practici atunci când lucrați cu șabloane JavaScript
- MDN: șabloane JavaScript
- John Resig: Microtemplare JavaScript
- James Padolsey: Interplație directă