Motores de plantillas jQuery [cerrado]

Estoy buscando un motor de plantillas para usar del lado del cliente. He estado probando algunos como jsRepeater y jQuery Templates. Si bien parecen funcionar bien en Firefox, todos parecen descomponerse en IE7 cuando se trata de renderizar tablas HTML.

También eché un vistazo a MicrosoftAjaxTemplates.js (de http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ) pero resulta que tiene el mismo problema.

¿Algún consejo sobre otros motores de plantillas para usar?

Mira la publicación de Rick Strahl Client Templating con jQuery . Explora jTemplates, pero luego presenta un mejor caso para la solución de micro-plantillas de John Resig , incluso mejorándola un poco. Buenas comparaciones, muchas muestras.

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

1. Está escrito por John Resig.
2. El equipo central de jQuery lo mantendrá como un complemento "oficial". EDITAR: El equipo de jQuery ha dejado de usar este complemento.
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 complemento jQuery.

Lo usaré hasta que Resig lance la suya (si la lanza).

Gracias por el dato, ewbi.

jQuery Nano :

Motor de plantillas

Uso básico

Suponiendo que tiene 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 cuerda:

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

Página de prueba...

jQuery-tmpl estará en el núcleo de jQuery a partir de 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 jQuery UI, ya que dependerá de la próxima cuadrícula de jQuery UI.

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", consulte mi publicación aquí sobre el tema

Si buscas el más rápido , aquí hay un buen punto de referencia , parece que DoT gana y deja a todos atrás

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

Parte I: Plantillas JQuery

El complemento beta de plantilla JQuery oficialmente temporal fue http://api.jquery.com/category/plugins/templates/

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

Nota: El equipo de jQuery ha decidido no llevar este complemento a la versión beta. Ya no se está desarrollando o manteniendo activamente. Los documentos permanecen aquí por el momento (para referencia) hasta que esté listo un complemento de plantilla de reemplazo adecuado.

Parte II: el siguiente paso

La nueva hoja de ruta parece apuntar a un nuevo conjunto de complementos, JSRender (independiente del DOM e incluso el motor de renderizado de plantillas JQuery) y JSViews que tienen un buen enlace de datos y una implementación de patrón observador / observable

Aquí está la publicación 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 todavía ni siquiera está en versión beta, y solo es un elemento de hoja de ruta, pero parece un buen candidato para convertirse en una extensión oficial de JQuery / JQueryUI para plantillas y enlaces de UI

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 lanzada 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 el resultado 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 esas respuestas. Pero asegúrese de echar un vistazo a las horquillas github.

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 como lo implementa http://JsonFx.net . Tiene una solución de plantillas del lado del cliente que tiene una sintaxis JSP / ASP familiar pero que se precompila en el momento de la compilación para plantillas compactas con capacidad de caché que no necesitan analizarse en tiempo de ejecución. Funciona bien con jQuery y otras bibliotecas de 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 trabajos muy ligeros, jquery-tmpl es adecuado, pero requiere en algunos casos que los datos sepan formatearse a sí mismos (¡algo malo!).

Si está buscando un complemento de plantillas con más funciones, le sugiero Orange-J . Fue inspirado por Freemarker. Admite si, de lo contrario, recorre objetos y matrices, JavaScript en línea, incluidas las plantillas dentro de las plantillas y tiene excelentes opciones de formato para la salida (maxlen, wordboundary, htmlentities, etc.).

Ah, y sintaxis fácil.

Es posible que desee pensar un poco en 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 difícil de trabajar en 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 sus contras.

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

Knockear es un buen ejemplo de este enfoque, pero no lo he usado yo mismo, así que lo dejo a los votos para decidir si a otros les gusta o no. Al menos hasta que tenga tiempo para jugar más.

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

Como referencia, también puede mirar chain.js , pero no parece haberse actualizado mucho desde su lanzamiento original. Para obtener más información al respecto, consulte 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, puede consultar 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 marco de plantillas multi HTML. Este marco hace que sea mucho más fácil importar datos con plantilla 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 una representación mucho más automática, principalmente utilizando selectores jquery, lo que es más importante, no requiere poner cosas sofisticadas en HTML.