Una plantilla es un fragmento de HTML que necesita inyectar en la página. A menudo, las plantillas se crean "del lado del servidor", en el sentido de que llegan al JavaScript completamente formadas y solo necesitan colocarse en el DOM. Pero a veces eso no es factible o requeriría un viaje de ida y vuelta adicional al servidor, que podría ser lento. En ese caso, tener la plantilla en JavaScript es ideal. Ciertamente, puede hacer un poco de concatenación de cadenas agregando bits de HTML y datos hasta que tenga la plantilla que necesita. Pero eso probablemente no sea ideal, ya que no separa las preocupaciones de los datos y la plantilla. Las plantillas de JavaScript reales pueden ayudar aquí.
En este screencast cubriremos el "por qué" básico de las plantillas de JavaScript y luego cubriremos específicamente un ejemplo simple de cómo se hace en Underscore.js. Luego cubriremos algunas otras alternativas.
Manifestación
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Vea el Pen% = penName%> de Chris Coyier (@chriscoyier) en CodePen
Enlaces
- Demostración básica en CodePen
- Plantilla de Underscore.js
- NetTuts: mejores prácticas al trabajar con plantillas de JavaScript
- MDN: plantillas de JavaScript
- John Resig: Micro-plantillas de JavaScript
- James Padolsey: Interposición directa