¿Práctica recomendada para almacenar plantillas HTML en una página?

Estoy desarrollando una interfaz bastante pesada de JavaScript para un sitio que estoy construyendo, y he decidido usar el (recientemente hecho oficial) jQuery templates plugin para generar mis elementos desde mis consultas a una API JSON. Ahora, el problema que tengo actualmente es:¿Práctica recomendada para almacenar plantillas HTML en una página?

Tengo muchas plantillas disponibles. Uno para cada tipo de objeto, otro para listas, otro para secciones de la página, etc. ¿Hay alguna forma preferida de almacenar estas plantillas? He leído sobre la definición de una etiqueta <script> con un id usando el nombre de la plantilla, y luego recuperando el texto de allí (como describe John Resig en "JavaScript Micro-Templating"), pero tener un montón de esas etiquetas <script> en cada página se ve un poco hackish.

Entonces, la pregunta es: ¿hay alguna 'mejor práctica' para este tipo de escenario?

Fuente

2010-11-18 dguaraglia

¿El método de ese '

Recientemente he hecho este ejercicio y aunque el método de etiqueta <script> parece un poco hackoso, acepté esta como una buena solución y opté por mi propia versión (la versión de John Resigs obviamente es realmente buena, pero opté por la mía fácilmente comprensible para mi propia versión cerebro)

mi versión es una plantilla básica y la sustitución utilizando valores reemplazables en la plantilla form##VALUE##

: (plantilla solo artículo o plantilla fila)

<script type="text/html" id="ItemTemplate"> 
<table> 
    <tr> 
    <td>##LABEL1##</td> 
    <td>##VALUE1##</td> 
    <tr> 
</table> 
</script>

construcción contenido FUNCIÓN:

function constructFromTemplate(content, values, appendTo) { 
    var modifiedHtml = content; 
    modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##'); 

    $.each(values, function (n, v) { 
     modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v); 
    }); 

    if (appendTo != null) 
    { 
     $(appendTo).append(modifiedHtml); 
     //initializePageElements(); 
    } 

    return modifiedHtml; 
}

USO

El contenido será devuelto de la función y/o se puede establecer el parámetro appendTo establece la elementID de forma automática append el contenido. (Establecido null a no append)

Los valores reemplazables se acaba de agregar como un objeto dinámico donde los object nombres son los elementos reemplazables.

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

nota: he comentado //initializePageElements();, esto se utiliza para inicializar jQuery plugins, estilos de la plantilla.

estilos Sólo en línea parecen funcionar al insertar el contenido en el DOM

Fuente

2010-11-18 20:57:02

Solo por curiosidad: ¿cuál sería ese enfoque? :) – dguaraglia

utilicé la escritura con éxito con mi marco jquery pure html templates

Respecto de las mejores prácticas, por favor, eche un vistazo a la nueva interfaz de Twitter, usando una página para todo y solo enrutando internamente a través de "#!/paths".

Usando las costuras del sitio web de una sola página para ser el siguiente gran paso para las aplicaciones web, personalmente me gusta llamarlo web 3.0 :) También eliminará el problema de tener todas las mismas plantillas en cada página - solo tendrá una página.

Fuente

2010-11-19 23:36:04 mpapis

¿Por qué no simplemente carga sus plantillas en un elemento oculto y luego usa $(template).clone()? Eso ahorra muchos dolores de cabeza de escape. No puedo hablar sobre el rendimiento en .clone() en comparación con el enfoque <script>, pero puedo decir que las etiquetas de scripts adicionales son una penalización de rendimiento y, en general, hacen que el código se enturbie.

¿Por qué?

pesar de que tiene una utilidad escapar elegante, todavía se cometen errores, y van a estar mucho más difícil de leer. Además, si tiene que trabajar en una situación de equipo, especialmente si las personas completan o finalizan el proyecto, puede que no sea fácil de entender.
se puede crear un objeto de puntero, por ejemplo, templates = {} y cargarla con punteros de objeto jQuery a sus elementos clon-poder de este modo:
```
templates = {}; 
templates.message = $("#templates .message"); 
templates.dialog = $("#templates .dialog"); 
```

ahora todo lo que tiene que hacer para crear una nueva plantilla es:

var newDialog = templates.dialog.clone();

se puede hacer una función de contenedor para aceptar params, y luego agregar estos con newDialog.find("title").html(title), newDialog.find("message").html(message), etc.

Una vez más, desde una perspectiva de rendimiento, no sé cuál es más rápido, ya que no tengo tiempo para probar en este momento. Pero sé que usar métodos sancionados es generalmente mejor cuando se trabaja en una base de código lo suficientemente grande como para requerir plantillas ... es inevitable que otras personas se involucren eventualmente, y cuanto más tenga que estar para explicar las cosas, menos tiempo tendrá para hacer tu propia codificación rudo.

Otro aspecto importante del rendimiento es el tiempo ... si está experimentando retrasos en el rendimiento, debe asegurarse de dividir los trozos de código ejecutable largo utilizando setTimeout. Crea una nueva pila y permite al navegador pintar lo que ya se procesó hasta el momento justo antes de que se cree la nueva pila. Esto ayuda inmensamente cuando se trata de retrasos visuales como parte de un problema de rendimiento (por lo general, el problema de rendimiento más común observado, especialmente por los no codificadores). Si quieres más información sobre eso, envíame un mensaje y reuniré algunos recursos. Tiempo limitado en este momento, apagando incendios en el trabajo. :)

Fuente

2010-11-22 20:09:21

El propósito de una plantilla es insertar datos fácilmente en ella. La clonación de un fragmento de documento haría que ese proceso fuera inmensamente doloroso. Puedo generar html desde una plantilla en una línea de código. –

.clone() es un método profundo; ¿cómo sería doloroso? –

¿cómo insertar datos en el marcado sin hacerlo un elemento a la vez? –

En asp.net mvc A menudo empaco mis plantillas comunes en una vista parcial que puedo incluir donde lo necesito. De esa forma no necesito repetir mis plantillas por todos lados.

Otro enfoque es tener sus plantillas en archivos separados. Como newslist.tmpl.html que le permite cargar la plantilla con ajax.Teniendo en cuenta que esto se puede hacer en paralelo con la carga de datos, no debe ralentizar su aplicación, ya que es más probable que sea más rápida que la llamada de datos de todos modos.

Fuente

2010-11-22 21:16:26

vistazo a https://github.com/inspiraller/STQuery

STQuery utiliza todos los mismos nombres de los métodos como jQuery pero en lugar de la manipulación de los elementos en el DOM, que trabaja directamente en la cadena:

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>'; 

var ST = STQuery(strTemplate); 

ST.find('h1').html('Hello'); 
ST.find('.content').html('World!'); 

var strTemplateUpdated = ST.html();

Esto mantiene separada la lógica de la plantilla, es decir, plantillas html discretas.

Las ventajas sobre jquery es que STQuery no tiene que escribir primero en el DOM, lo que significa que puede usar web workers o hacer toda su manipulación de plantillas en el servidor. Nota: a partir de este mensaje, stquery solo se ha escrito en javascript, por lo que deberá convertirse al idioma de elección del servidor.

Fuente

2011-07-20 15:18:09 steve

Cuestiones relacionadas