estoy básicamente de acuerdo con el giro de esta respuesta: Where to keep html templates? que ya está haciendo la derecha cosa, debido al principio KISS.
Dependiendo de la cantidad de plantillas que termine (mencionó "muchas más"), es posible que desee separarlas de su página principal. Hay un par de razones para esto.
Una razón sería nuevamente el principio de KISS. Demasiadas plantillas podrían hacer que su código fuente sea difícil de navegar. Su editor o IDE podría tenerlo cubierto en esto ya. Si no, esta puede ser una buena razón para poner sus plantillas en archivos separados.
La otra razón sería para el rendimiento. Si sirve el archivo HTML por sí mismo, sin las plantillas, su página llegará al cliente y comenzará a procesar mucho antes. También puede permitir que el cliente almacene en caché algunas plantillas y solo cargue nuevas cuando cambien. Esto hará que las visitas futuras a su sitio se inicialicen mucho más rápido.
Si el rendimiento es especialmente importante, puede considerar una combinación de los dos enfoques. Incluiría las plantillas esenciales, las que componen la estructura básica de su página, en la página HTML principal.Luego, las plantillas opcionales se pueden recuperar después de cargar la página y/o justo antes de que sean necesarias. Para incluir las plantillas esenciales, puede usar plantillas del lado del servidor.
En cuanto a su pregunta original, en cuanto a dónde almacenarlos, les digo que los coloque en cualquier lugar que tenga sentido para usted. Luego, consulte Dave Ward's article on using external templates with jQuery templates para obtener información sobre cómo compilar y recuperar sus plantillas. He aquí el fragmento esencial de código:
// Asynchronously our PersonTemplate's content.
$.get('PersonTemplate.htm', function(template) {
// Use that stringified template with $.tmpl() and
// inject the rendered result into the body.
$.tmpl(template, person).appendTo('body');
});
Luego, ver An Introduction to jQuery Templates, by Stephen Walther y saltar a la sección titulada "Plantillas a distancia". Él tiene un ejemplo allí que busca y compila la plantilla solo una vez, pero hace que sea posible renderizar varias veces. Aquí están los fragmentos esenciales:
// Get the remote template
$.get("ProductTemplate.htm", null, function (productTemplate) {
// Compile and cache the template
$.template("productTemplate", productTemplate);
// Render the products
renderProducts(0);
});
function renderProducts() {
// Get page of products
var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5);
// Used cached productTemplate to render products
$.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer");
}
Pensé que el propósito de las plantillas es separar el contenido común en archivos separados? ¿Qué motor de plantillas está usando, cómo se ve su código y qué ha intentado hasta ahora? – jmort253
@ jmort253 publicación actualizada para responder a su pregunta. – LDK