¿Biblioteca de plantillas HTML de JavaScript recomendada para JQuery? [cerrado]

89

¿Alguna sugerencia sobre qué biblioteca de plantillas HTML iría bien con JQuery? Al buscar en Google, aparecen bastantes bibliotecas, pero no estoy seguro de si existe una biblioteca bien reconocida que resistiría la prueba del tiempo.

Shiva
fuente
21
Supongamos que recupera un objeto json con 100 registros. Cada registro debe generar el mismo fragmento html. Solo ayuda usar una plantilla que generar el marcado en js. Permite a un diseñador diseñarlo también en lugar de que el marcado esté dentro de una cadena en una función js
redsquare
3
@cletus - porque es más fácil usar una plantilla con formato html que una cadena de anexos
Andrey
2
Utilice esta comparación de rendimiento
AM

Respuestas:

58

Bueno, para ser franco, la creación de plantillas del lado del cliente está muy caliente hoy en día, pero toda una jungla.

los más populares son, creo:

  • puro : usa solo js, ​​no su propia "sintaxis"
  • Bigote : bastante estable y agradable escuché.
  • jqote2 : extremadamente rápido según jsperfs
  • plantillas de jquery (obsoletas):

hay muchos otros, pero tienes que probarlos para ver qué se adapta mejor a ti y al estilo de tu proyecto.

Personalmente, tengo dificultades para agregar una nueva sintaxis y un conjunto de lógica ( mezcla de lógica y plantilla, ¿hola? ), Y me fui puro js. Cada una de mis plantillas se almacena en su propio archivo html (./usersTable.row.html). Utilizo plantillas solo cuando agrego contenido, y tengo pocos archivos js "lógicos", uno para tablas, uno para div, uno para listas. y ni siquiera uno para las opciones de selección (donde uso otro método).

Cada vez que intentaba hacer algo más complejo, descubría que el código era menos claro y me tomaba más tiempo estabilizarlo que hacerlo de la manera "antigua". La lógica en la plantilla no tiene sentido en mi opinión, y agregar su propia sintaxis solo agrega errores muy difíciles de rastrear.

Roselan
fuente
14

jTemplates

un motor de plantillas para JavaScript.

Complemento para jQuery ...

caracteristicas:

  • 100% en JavaScript
  • precompilador
  • Soporte JSON
  • Trabajar con Ajax
  • Permitir usar código JavaScript dentro de la plantilla
  • Permitir crear plantillas en cascada
  • Permitir definir parámetros en plantillas
  • Live Refresh! - actualización automática de contenido desde el servidor ...
cuadrado rojo
fuente
8

Hay un documento de discusión razonable sobre este tema aquí , que cubre una variedad de herramientas de creación de plantillas. Sin embargo, no es específico de jQuery.

Marc Gravell
fuente
5

Complemento de plantillas de jQuery creado por Microsoft y aceptado como complemento oficial de jQuery.

Pero tenga en cuenta que ahora está obsoleto.

Andrey
fuente
13
y "obsoleto" desde. El desarrollo se detiene y esto no saldrá de la versión beta. un tipo de ms, y el equipo de jquery-ui están trabajando en una nueva plantilla, basada en JSRender;)
roselan
Eh, fastidio, lo estoy usando en toda mi aplicación web :( ¡Gracias por el consejo! ¿Tiene un enlace sobre el próximo motor de plantillas que mencionó?
Andrey
1
si todo va bien, jsrender de boris moore lo encontrará en jquery-ui. No hay necesidad de apurarse, supongo;)
roselan
1
Implementé jsRender en un proyecto y es simplemente increíble. Vale la pena echarle un vistazo.
ASeale
4

Me volvería a la salida json2html , se renuncia a tener que escribir fragmentos de HTML y se basa en cambio en las transformaciones para convertir JSON JSON objeto de matriz en las listas no estructurados. Muy rápido y utiliza la creación de DOM.

Chad Brown
fuente
4
descargo de responsabilidad .. escribí esto. Pero vale la pena echarle un vistazo;)
Chad Brown
3

Hace un par de años construí IBDOM: http://ibdom.sf.net/ | A diciembre de 2009, es compatible con el enlace jQuery si lo obtiene directamente del tronco.

$("#foo").injectWith(collectionOfJavaScriptObjects);

o

$("#foo").injectWith(simpleJavaScriptObject);

Además, ahora puede poner todos los marcadores "data: propName" en los atributos class = "data: propName otros nombres de clase", para que no tenga que ensuciar el contenido de su aplicación con esos marcadores.

Todavía tengo que actualizar un montón de documentación para reflejar mis mejoras recientes, pero he tenido varias versiones de este marco en producción desde 2007.

Para los escépticos de esta pregunta:

Cuando Microsoft inventó con IE5 lo que ahora conocemos como XmlHttpRequest y el patrón "ajax", parte de la promesa detrás de esto era simplemente intercambiar datos entre un navegador web y el servidor. Esos datos iban a ser encapsulados en XML, porque en 1999/2000, XML estaba simplemente muy caliente. Más allá de recuperar un documento xml a través de la red con un mecanismo de devolución de llamada, el componente MSXML ActiveX de MS también admitió una implementación preliminar de lo que ahora conocemos como XSL-T y XPath.

La combinación de la recuperación de HTTP / XML, XPath y XSL-T brindó a los desarrolladores una gran creatividad para crear "documentos" ricos que se comportaban como "aplicaciones", simplemente enviando y, lo que es más importante, recuperando datos del servidor.

¿Por qué es este un patrón útil? Depende de qué tan compleja sea su interfaz de usuario y cuánto le importe su mantenibilidad.

Al construir una interfaz visualmente muy rica y semánticamente marcada con CSS avanzado, lo último que desea hacer es fragmentar piezas de marcado en "mini-controlador / vistas", solo para que pueda .innerHTML un fragmento de documento en el principal documento, y he aquí por qué.

Un principio clave para mantener manejable una interfaz de usuario html / css avanzada es preservar su validación al menos durante su fase activa de desarrollo. Si su marcado se valida, puede concentrarse en sus errores de CSS. Ahora, si se inyectan fragmentos de marcado durante varias etapas de la interacción del usuario, todo se vuelve muy difícil de manejar y todo se vuelve frágil.

La idea era tener todas sus construcciones de interfaz de usuario de marcado en un solo documento, recuperar SOLO DATOS a través de la red y usar un marco sólido que al menos simplemente inyectará sus datos en sus construcciones de marcado y, como máximo, replicará construcciones de marcado que marcó como repetible.

Esto fue posible con XSL-T y XPath en IE5 +, pero prácticamente ningún otro navegador. Algunos marcos de navegador F / OSS han estado incursionando con XPath, pero todavía no es algo en lo que podamos confiar.

Entonces, ¿cuál es la mejor alternativa para lograr ese patrón? IBDOM. Obtenga datos de su servidor, inyéctelos en su documento. sin esfuerzo.

Chris Holland
fuente
una cosa más: IBDOM utiliza métodos DOM 100% puros y cero innerHTML.
Chris Holland
otra nota: IBDOM implementa lo que llamo "forkedLoopExecution", que es un componente de uso interno y algo que se puede usar por sí solo. Aquí estaba el problema: digamos que está modificando el DOM a través de createElement y appendChild, en algún tipo de construcción de bucle que tiene que pasar por una gama bastante grande de objetos de big data: la mayoría de los navegadores no "repintarán" la interfaz de usuario, hasta el código que afecta al DOM "regresa". En un gran "bucle for" con una gran cantidad de datos, nuestros resultados de búsqueda podrían tardar entre medio segundo y un par de segundos antes de mostrar todo el contenido en un solo fragmento.
Chris Holland
la solución: la ejecución de bucle bifurcado aprovecha la ejecución recursiva inducida por setTimeout a lo largo de la vida de la recopilación de datos pasados ​​repetidamente para esencialmente "regresar y volver a pintar" en cada iteración del bucle, lo que le brinda esta sensación de renderizado instantáneo: "darle al usuario algo que mirar -a la derecha jodidamente ahora ".
Chris Holland
2

Debería echar un vistazo a Javascript-Templates, este es un pequeño motor de plantillas utilizado dentro del famoso complemento jQuery File Upload, y desarrollado por el mismo autor, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Siga la guía de uso hecha por Sebastian, simplemente elimine esta línea

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Reemplázalo con este

$('#result').html(tmpl('tmpl-demo', data));

No olvide agregar la etiqueta de resultado div en su archivo HTML también

<div id="result"></div>

Disfrutar

vinzcelavi
fuente