2011-01-18 11 views
5

Por el momento tengo una sola página html que tiene 4 plantillas y tendrá muchas más. ¿Es posible poner las plantillas en diferentes archivos e "importarlos"? ¿Puedo definirlos en un archivo .js?plantillas de jQuery: ¿dónde debería ponerlas?

estoy usando jQquery plantilla plugin: http://api.jquery.com/category/plugins/templates/

Mi código es similar a los ejemplos!

+0

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

+0

@ jmort253 publicación actualizada para responder a su pregunta. – LDK

Respuesta

5

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"); 
} 
2

Control hacia fuera este desbordamiento de la pila de preguntas, hay un montón de ejemplos aquí EDIT: posiblemente obsoleta Recommended JavaScript HTML template library for JQuery?

Además, aquí es un artículo más reciente sobre el uso de archivos de plantillas externas: http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/

+0

No recomendaría el primer enlace, porque la pregunta y las respuestas son antiguas. Lo suficientemente viejo como para no incluir el último plugin de plantillas provisto por jQuery, que funciona muy bien. –

0

I No sé si esto ayudará si no está usando .NET. Pero tengo el mismo problema y he escrito algo de código para hacer precisamente eso: Texto

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fJqueryTemplate.cs

Esta cosa, básicamente, sólo va a un camino y copiar y pegar todos los archivos html y adjunta el tipo script = "/x-jquery-tmpl " parte en él.

Si necesita que esto sea aún más automático, aquí hay algo de otro código que añade las plantillas a la cuerpo de un archivo html/aspx:

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fMasterPage.cs

no me gusta el método de plantillas externas debido a la cantidad de solicitudes HTTP necesarias. Idealmente, quiero que se descargue una vez en la página y puedo olvidarme de las plantillas. Si está utilizando Asp.net, se puede poner esto en el MasterPage :)

espero que ayudó

Chi

Cuestiones relacionadas