¿La mejor manera de empaquetar varias plantillas de jQuery en una sola solicitud de xHttp?

Question

Actualización: después de otro día de la excavación en este tema, he encontrado que la actual plantilla lib jQuery proporciona hay manera de hacer esto. this article describe un buen enfoque.

Me gustaría saber de ideas adicionales sobre cómo hacer esto. El artículo vinculado anteriormente requiere que la cadena de plantillas devuelta sea insertada en el DOM. Parece que dejando el DOM fuera de esto sería ideal, y menos sobrecarga en el navegador . Imagine una página grande, con plantillas compuestas múltiples que pueden no ser utilizadas. Aunque, tal vez porque las plantillas están envueltas en una etiqueta de script , solo hay un elemento DOM por plantilla. Vamos, vamos a escuchar algunos pensamientos ...

Usando jQuery template libs, ¿cuál es la mejor manera de combinar múltiples, relacionados, relativamente pequeñas plantillas juntos? ¿Necesita una sola etiqueta <script> para cada plantilla individual? ¿Qué tal en el caso de tirar dinámicamente estas plantillas a través de AJAX? ¿Puedo combinar estas plantillas de alguna manera?

considerar lo siguiente:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}} 
    <tr class="detail"><td>Director: ${Director}</td></tr> 
</script> 

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr> 
</script> 

Ahora bien, porque estas dos plantillas están muy estrechamente relacionados (y una depende de la otra) que tendría sentido para consolidarlas en una sola llamada AJAX, y obtener los dos al una vez. Tengo algunas ideas, pero me gustaría saber si hay una forma común/mejor para hacer esto. Actualmente me tire en un trozo de HTML, y luego hacer un .find() para obtener el pedazo específico de HTML para una plantilla de ... ej:

var templatePackage = fancyAjaxCalltoGetTemplates(); 

"templatePackage" podría tener el siguiente aspecto:

<div id="templatePkg"> 
    <div id="movieTemplate"> 
    {{tmpl "#titleTemplate"}} 
     <tr class="detail"><td>Director: ${Director}</td></tr> 
    </div>  

    <div id="titleTemplate"> 
    <tr class="title"><td>${Name}</td></tr> 
    </div> 
</div> 

entonces podría hacer:

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate')); 

y

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate')); 

... déjame saber lo que piensas ... ¿qué harías?

Answer 1

Bien, leí el artículo que hace referencia en esta publicación. Tal como lo veo, su camino es probablemente una de las mejores formas de cargar la (s) página (s) de la plantilla. Lo único que no me gusta son los problemas asíncronos que podrían surgir, esp. si necesita hacer algunas plantillas inmediatamente antes de la asincronización, obtendrá devoluciones ... además de cualquier problema vinculante que pueda ocurrir antes de que devuelva algo. En varios proyectos que he hecho yo uso el SSI "antigua" (lado del servidor), pero sólo tiene que utilizar algo aún más fácil como:

<% Response.WriteFile("this_page_template_file.html"); %>

Se puede poner en cualquier lugar donde tendría que incluir una etiqueta. Como él dice, solo ingrese las plantillas que necesita, o tal vez incluya dos plantillas: una es una plantilla "base" con artículos de uso común y la segunda tendría las plantillas específicas con referencias de plantilla {{tmpl}} .

¿Esto es casi una respuesta? ;-)

Answer 2

[Primero, gran pregunta. Me encanta este tema]

No tengo experiencia con el plugin "jquery-template-libs", pero hay plugins de plantillas de javascript livianos que se están convirtiendo casi en un estándar y juegan muy bien con jQuery, que probablemente sea mejor adecuado para la tarea que JTL, bigote:

https://github.com/janl/mustache.js

tiene algo que se llama un "parcial", que es esencialmente una forma de incluir las plantillas más pequeñas dentro de otro. Lo cual suena como que te ayudará mucho.

Además de eso hay una biblioteca llamada ICanHaz.js:

http://icanhazjs.com/

ICanHaz extiende esencialmente bigote para incluir construido en la funcionalidad para las plantillas y funciona increíblemente bien.

Bigote/ICanHaz le permiten agregar plantillas por variable, mediante una llamada json o mediante el uso de etiquetas. La decisión es tuya.

Answer 3

Sé que esta es una vieja pregunta, pero es posible que desee echar un vistazo a Closure-Templates. Proporcionan el tipo de funcionalidad que busca con la ventaja adicional de ser compilado en JavaScript en tiempo de compilación en lugar de en tiempo de ejecución en el navegador de cada usuario.

Si decides estudiar su uso, te sugiero usar plovr para construirlos.

Answer 4

Me gusta el artículo al que se hace referencia en su actualización, excepto la suposición de que no puede almacenar en caché las plantillas a menos que las inserte en el DOM. Desde el jQuery.tmpl documentation,

"Para almacenar en caché la plantilla cuando se usa marcado que se obtiene a partir de una cadena (en lugar de a partir de marcas en línea en la página), utilice $.template(name, markup) para crear una plantilla llamada para su reutilización. Ver jQuery.template()."

Al usar esto, podemos crear un sistema de gestión de plantillas de JavaScript que nos permita cargar tantas plantillas a la vez como necesitemos manteniendo el DOM limpio. En el cliente, mantenga un hash de objetos de plantilla por nombre. Puede utilizar su objeto favorito basado Javascript patrón aquí, pero yo creo que la estructura podría ser así:

templates[templateName] = { 
    templateMarkup: markupFromServer, 
    loadedAt: Date.now(), 
    compiledTemplateFunction: jQuery.template(templateName, markupFromServer) 
} 

A continuación, utilice las plantillas para generar HTML así:

templates['unique-name'].compiledTemplateFunction(inputData) 

A continuación, construir una descargar mecanismo para liberar memoria:

function unload(templateName) { 
    delete templates[templateName]; 
    delete jquery.template[templateName]; 
} 

Lo más importante es que ahora tienen un método de almacenar varias plantillas para que pueda hacer peticiones como: $.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess) a lo ad varias plantillas a la vez. Lo único que necesitamos es un controlador TemplateManagement que tomará una matriz de nombres de plantilla como entrada y devolverá JSON que empareja un nombre de plantilla con su marca. Hay algunas maneras de hacerlo, pero me parece que lo más conveniente es definir vistas parciales para cada plantilla. En ASP.NET MVC 3, puede usar this technique y RenderPartial para emitir el marcado de cada plantilla en una respuesta JSON. Puede nombrar las vistas parciales de la misma manera que las plantillas o asignar los nombres de alguna manera personalizada.