Uso de un fragmento de HTML para una plantilla en JavaScript (jQuery)

Question

Actualmente estoy trabajando en una pequeña aplicación que solicita información de usuario de mi servidor y las muestra mediante una plantilla especial.

Al principio, sólo codificada de manera no del pequeño recorte en jQuery:

$("<li><div class='outer'><table><tr><td rowspan=2 class='imgcontainer'><img class='thumb'/></td><td><span class='username'/></td></tr><tr><td><span class='name'/></td></tr></table></div></li>") 

Puedo clonar varias veces.

Es feo y quiero que tenga resaltado de sintaxis y otras cosas, por lo que sería mejor para mí tenerlo en el archivo HTML.

Además, facilitará las fusiones para que alguien pueda cambiar una línea o dos.

¿Hay un patrón para esto? ¿Estoy bien poniéndolo en el archivo HTML en el que incluyo este JS (solo hay uno) y oculto usando CSS?

La tercera opción que pensé es simplemente crear un archivo HTML separado y pedirle a jQuery que lo mantenga separado del servidor. ¿Se usa mucho esta técnica?

Además, ¿hay algún término que pueda usar para describir lo que estoy haciendo? (Es más difícil hacer una pregunta para un concepto que no sé el nombre)

Answer 1

Di una respuesta similar en SO earlier today. Lo que estás buscando se llama micro-plantillas. John Resig publicó this on his blog. Básicamente, puede obtener un conjunto de datos json y aplicar una plantilla a los datos para crear html y actualizar el DOM.