Un modello è un pezzo di HTML che devi inserire nella pagina. Spesso i modelli vengono creati "lato server", in quanto arrivano al JavaScript completamente formati e devono solo essere inseriti nel DOM. Ma a volte ciò non è fattibile o richiederebbe un viaggio di andata e ritorno extra al server che potrebbe essere lento. In tal caso, avere il modello direttamente in JavaScript è l'ideale. Puoi certamente fare solo un po 'di concatenazione di stringhe aggiungendo insieme bit di HTML e dati finché non hai il modello che ti serve. Ma probabilmente non è l'ideale in quanto non separa le preoccupazioni dei dati e del modello. Il vero template JavaScript può aiutare qui.
In questo screencast tratteremo il "perché" di base dei modelli JavaScript e quindi tratteremo in modo specifico un semplice esempio di come è fatto in Underscore.js. Quindi tratteremo alcune altre alternative.
Demo
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Vedi Pen% = penName%> di Chris Coyier (@chriscoyier) su CodePen
Collegamenti
- Demo di base su CodePen
- Underscore.js Templating
- NetTuts: best practice quando si lavora con modelli JavaScript
- MDN: modelli JavaScript
- John Resig: JavaScript Micro-Templating
- James Padolsey: interplazione diretta