Motores de plantillas jQuery [cerrado]

204

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?

Maurice
fuente
1
Quería responder esta pregunta dos veces :)
Mark Schultheiss
1
Verificaría los muy buenos (pero pre-beta) JSViews y JSRender, parecen un potencial motor de plantillas JQuery / UI oficial (al menos esto es lo que dice la hoja de ruta)
Eran Medan
1
JsRender ahora tiene un candidato beta público: borismoore.com/2012/03/…
John Papa
Estoy usando plantillas DoT ahora, buen rendimiento y notación de bigote
Eran Medan

Respuestas:

109

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.

ewbi
fuente
3
github.com/jquery/jquery-tmpl es el repositorio real del plugin de plantillas de Resig.
Alexander Bird
@ Thr4wn, la fuente en la reproducción es significativamente entonces la biblioteca discutida en los artículos vinculados. Sin embargo, ambos por Resig, claro.
Frank Schwieterman
@Frank "la fuente en la reproducción es significativamente entonces la biblioteca discutida en los artículos vinculados" Um ¿eh? ¿Que qué? No estoy seguro de lo que quieres decir con esto en absoluto.
Mark Schultheiss
2
@ Mark: se refería a "significativamente diferente de".
Domenic
No he visto ningún ejemplo de formas complejas construidas con esto. ¿Alguien ha explorado lo que se necesitaría para agregar una fila, alguna parte de una plantilla completa, para acomodar un nuevo elemento en la matriz de un objeto? La plantilla incluiría la creación de plantillas de los índices de elementos de las matrices y podría serializarse correctamente para POST. Pero tengo problemas para pensarlo todo. El objetivo es la funcionalidad de InfoPath. (Soy consciente de las diversas características y alternativas de rutas de información existentes.)
Jason Kleban
47

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

Todd Menier
fuente
+1. Pero usé Rick Strahl's. Bcoz es pequeño y sirve bien a mi propósito.
IsmailS
se acaba de anunciar que este es ahora el complemento oficial
serg
20
Lamentablemente, fue depreciado . cualquier tenedor?
OnesimusUnbound
3
¿Ha cambiado el escenario ahora en 2012, quiero decir, hay mejores soluciones para la plantilla mediante el uso de bibliotecas desarrolladas sobre la secuencia de comandos original de resig?
Rajat Gupta
44
@OnesimusUnbound Ha sido super-sembrado por JS Render. github.com/BorisMoore/jsrender
Blowsie
17

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...

Tomasz Mazur
fuente
Esto no hace estructuras de control (ifs y bucles)
mahemoff
13

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/

jonsequitur
fuente
11

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

Chris Vest
fuente
además de sus limitaciones, PURE es muy fácil de usar
Jader Dias
@Jader, ¿qué limitaciones son las más dolorosas?
Mic
@Mic PURE está limitado por el diseño. En los motores de plantillas del lado del servidor no tiene que apegarse a HTML válido, pero PURE se basa en HTML. Pero creo que hay peculiaridades que permitirían que otro motor de plantillas de JavaScript sea tan poderoso como los del lado del servidor.
Jader Dias
@Jader, ok solo para HTML. Pero no entendí a qué te refieres con caprichos y otro motor.
Mic
@Mic PURE debería reescribirse desde cero para permitir la inclusión de algunas funciones. Para permitir plantillas HTML no válidas, debe usar scriptetiquetas con atributos typediferentes de text/javascript. Esta es una "peculiaridad" que permitiría HTML no válido.
Jader Dias
7

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.

Otros recursos

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

Eran Medan
fuente
4

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/ ;)

molokoloco
fuente
3

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).

levik
fuente
2

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

Yann
fuente
1
¿Algún tenedor en particular para buscar soluciones?
Kevin Hakanson
TBH, es un poco desordenado ... Fui a github.com/appendto/jquery-tmpl después de un rápido análisis de los cambios y considerando el hecho de que appendto es una empresa. YMMV
Yann
jquery-tmpl se ha plegado en la distribución oficial 1.4.3.
Yann
1

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.

mckamey
fuente
1

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.

Donovan Walker
fuente
0

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/ .

studgeek
fuente
0

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!)

Bny
fuente
-1

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.

mpapis
fuente