jQuery templating engines [cerrado]

Acabo de investigar sobre esto y usaré jquery-tmpl. ¿Por qué?

1. Está escrito por John Resig.
2. Será mantenido por el equipo central de jQuery como un plugin "oficial". EDITAR: El equipo de jQuery ha desaprobado este plugin.
3. Logra un equilibrio perfecto entre simplicidad y funcionalidad.
4. Tiene una sintaxis muy limpia y bien pensada.
5. Codifica HTML por defecto.
6. Es altamente extensible.

Más aquí: http://forum.jquery.com/topic/templating-syntax

JQote: http://aefxx.com/jquery-plugins/jqote /

Alguien tomó la solución de micro-plantillas de Resig y la empaquetó en un plugin de jQuery.

Usaré esto hasta que Resig libere el suyo propio (si él libera el suyo propio).

Gracias por el consejo, ewbi.

JQuery Nano:

Motor de plantillas

Uso Básico

Asumiendo que tienes la siguiente respuesta JSON:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

Puedes hacer:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

Y te preparas cadena:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

Página de prueba...

JQuery-tmpl estará en el núcleo de jQuery comenzando en jQuery 1.5:

Http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

La documentación oficial está aquí:

Http://api.jquery.com/category/plugins/templates /

EDITAR: Se ha dejado fuera de jQuery 1.5 y ahora será coordinado por el equipo de interfaz de usuario de jQuery, ya que será una dependencia de la próxima interfaz de usuario de jQuery Grid.

Http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap /

No estoy seguro de cómo maneja su problema específico, pero también está el motor de plantillas PURE.

Depende de cómo defina "mejor", por favor vea mi post aquí sobre el tema

Si buscas el más rápido , aquí hay un buen benchmark , parece que Dot gana, y deja a todos los demás atrás

Si está buscando el complemento jQuery más oficial , esto es lo que descubrí

Parte I: Plantillas jQuery

La beta, temporalmente-oficial plugin de plantilla jQuery fue este http://api.jquery.com/category/plugins/templates /

Pero al parecer, no hace mucho tiempo se decidió mantenerlo en Beta...

Nota: El equipo de jQuery ha decidido no pasar la beta de este plugin. Ya no se está desarrollando o manteniendo activamente. Los documentos permanecer aquí por el momento (para referencia) hasta que un adecuado plugin de plantilla de reemplazo está listo.

Parte II: El siguiente paso

La nueva hoja de ruta parece apuntar a un nuevo conjunto de complementos, JsRender (independiente del motor de renderizado de plantillas DOM e incluso jQuery) y JsViews que tienen un enlace de datos agradable y una implementación de patrones observables / observables

Aquí está la entrada del blog sobre el tema

Http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

Y aquí está la última fuente

• JsViews https://github.com/BorisMoore/jsviews
• JsRender https://github.com/BorisMoore/jsrender

Otros recursos

• Una buena presentación sobre el tema http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Demos de trabajo: http://borismoore.github.com/jsviews/demos/index.html

Tenga en cuenta que aún no está en beta, y solo es un elemento de la hoja de ruta, pero parece como un buen candidato para convertirse en una extensión oficial de jQuery/jQueryUI para plantillas y enlace de interfaz de usuario

Http://garann.github.com/template-chooser / este enlace es realmente útil para seleccionar una Plantilla Base Javascript.

Solo para ser el tonto ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

Http://jsfiddle.net/molokoloco/w8xSx/ ;)

Esto no es específico de jsquery, pero aquí hay una biblioteca de plantillas basada en JS publicada por Google como código abierto:

Http://code.google.com/p/google-jstemplate /

Esto permite usar elementos DOM como plantillas, y es reentrante (en el sentido de que la salida de una representación de plantilla sigue siendo una plantilla que se puede volver a representar con un modelo de datos diferente).

Otros han señalado jquery-tmpl, y he votado a favor de la respuesta. Pero asegúrate de echar un vistazo a github forks.

Hay correcciones importantes y características interesantes también. http://github.com/jquery/jquery-tmpl/network

John Resig tiene uno que ha publicado en su blog. http://ejohn.org/blog/javascript-micro-templating /

Si está trabajando en. NET Framework 2.0 / 3.5, debería echar un vistazo a JBST tal y como lo implementó http://JsonFx.net . Tiene una solución de plantillas del lado del cliente que tiene una sintaxis JSP/ASP familiar, pero está precompilada en el momento de la compilación para plantillas compactas compatibles con caché que no necesitan ser analizadas en tiempo de ejecución. Funciona bien con jQuery y otras bibliotecas JavaScript ya que las plantillas se compilan en JavaScript puro.

Estaba usando jtemplates jquery pluging pero el rendimiento fue realmente malo. Cambié a trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) que tiene un rendimiento mucho mejor. No he notado ningún problema con IE7 o FF.

Para un trabajo muy ligero, jquery-tmpl es adecuado, pero requiere en algunos casos que los datos sepan cómo formatearse a sí mismos (¡algo malo!).

Si estás buscando un plugin de plantillas más completo, te sugiero Orange-J. Fue inspirado por Freemarker. Soporta if, else, bucles sobre objetos y arrays, javascript en línea, incluyendo plantillas dentro de plantillas y tiene excelentes opciones de formato para la salida (maxlen, wordboundary, htmlentities, etc).

Oh, y fácil sintaxis.

Es posible que desee pensar un poco cómo desea diseñar sus plantillas.

Un problema con muchas de las soluciones de plantillas enumeradas (jQote, jquery-tmpl, jTemplates) es que requieren que inserte no HTML en su HTML, lo que puede ser un problema trabajar con herramientas HTML o en un proceso de desarrollo con diseñadores HTML. Personalmente no me gusta la sensación de ese enfoque, aunque tiene sus pros y contras.

Hay otra clase de enfoques de plantilla que utilizan HTML normal, pero le permiten para indicar enlaces de datos con atributos de elementos, clases CSS o asignaciones externas.

Knockout es un buen ejemplo de este enfoque, pero yo mismo no lo he utilizado, por lo que dejo a los votos decidir si a otros les gusta o no. Al menos hasta que tenga tiempo de jugar más con él.

PURE enumerado como otra respuesta es otro ejemplo de este enfoque.

Para referencia también puede mirar la cadena .js, pero no parece haber sido actualizado mucho desde su lanzamiento original. Para más información al respecto, véase http://javascriptly.com/2008/08/a-better-javascript-template-engine/.

Dropbox usando el motor de plantillas de John Resig en el sitio web. Lo han modificado un poco, puedes comprobarlo en este archivo js de dropbox. Busque en este archivo tmpl y codificará el motor de plantillas.

Gracias. Espero que sea útil para alguien.

Actualmente estoy usando un framework de plantillas multi HTML. Este marco hace que sea mucho más fácil importar datos con plantillas en su DOM. También gran modelado MVC.

Http://www.enfusion-framework.org / (¡mira las muestras!)

También hay una reescritura de PURE by beebole-jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

Debería permitir mucho más renderizado automático principalmente usando selectores jquery, lo que es más importante no requiere poner cosas elegantes en HTML.