Motores de plantillas jQuery [cerrado]

https://stackoverflow.com/questions/170168

05-07-2019
|

Pregunta

Estoy buscando un motor de plantillas para usar el lado del cliente. He estado probando algunas plantillas como jsRepeater y jQuery. Si bien parece que funcionan bien en FireFox, todos parecen descomponerse en IE7 cuando se trata de representar 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?

Solución

Consulte la publicación de Rick Strahl Plantillas de clientes con jQuery . Él explora jTemplates, pero luego hace un mejor caso para la solución de micro-plantillas de John Resig, Incluso mejorándolo un poco. Buenas comparaciones, muchas muestras.

Otros consejos

Simplemente hice una investigación sobre esto y usaré jquery-tmpl . ¿Por qué?

Está escrito por John Resig.
El equipo jQuery central lo mantendrá como un " oficial " enchufar. EDITAR: el equipo de jQuery ha desaprobado este complemento.
Encuentra un equilibrio perfecto entre simplicidad y funcionalidad.
Tiene una sintaxis muy limpia y bien pensada.
Se codifica en HTML de forma predeterminada.
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.

Estaré usando esto hasta que Resig libere el suyo propio (si libera el suyo propio).

Gracias por la sugerencia, 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 string:

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

EDIT: se ha quedado fuera de jQuery 1.5 y ahora será coordinado por el equipo de jQuery UI, ya que será una dependencia 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 busca el más rápido , aquí tiene un buen punto de referencia , parece que DoT gana, y deja a todos los demás atrás

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

Parte I: Plantillas JQuery

La versión beta, temporalmente-oficial El complemento de la plantilla JQuery era este http://api.jquery.com/category/plugins/templates/

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

Nota: el equipo de jQuery ha decidido no tomar este complemento más allá de la versión beta. Ya no se está desarrollando o manteniendo activamente. Los docs permanecerá aquí por el momento (para referencia) hasta que un adecuado El complemento de plantilla de reemplazo está listo.

Parte II: el siguiente paso

El nueva hoja de ruta parece apuntar para un nuevo conjunto de complementos, JSRender (independiente del DOM e incluso el motor de representación de plantillas JQuery) y JSViews que tienen un enlace de datos agradable y una implementación de observador / patrón 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
Demostraciones de trabajo: http://borismoore.github.com/jsviews/demos/index.html

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

http://garann.github.com/template-chooser/ este enlace es realmente útil para seleccionar una plantilla base de Javascript.

Solo para ser el necio ^^

// 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 fuente abierta:

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

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

Otros han señalado jquery-tmpl, y yo he votado esa respuesta. Pero asegúrate 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 implementado por http://JsonFx.net . Tiene una solución de plantilla del lado del cliente que tiene una sintaxis JSP / ASP familiar pero que se precompila en tiempo de compilación para las plantillas compactas capaces de caché que no necesitan ser analizadas en tiempo de ejecución. Funciona bien con jQuery y otras bibliotecas de JavaScript, ya que las plantillas en sí están compiladas a 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 en algunos casos requiere que los datos sepan cómo formatearse (¡algo malo!).

Si está buscando un complemento de plantillas con más funciones, sugeriría Orange-J . Fue inspirado por Freemarker. Admite si, de lo contrario, se desplaza sobre objetos & amp; arrays, javascript en línea, incluidas las plantillas dentro de plantillas y tiene excelentes opciones de formato para salida (maxlen, wordboundary, htmlentities, etc.).

Oh, y sintaxis fácil.

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 código no HTML en su HTML, lo que puede ser una molestia para 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 sus contras.

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

Knockout 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 que aparece como otra respuesta es otro ejemplo de este enfoque.

Para referencia, también puede consultar chain.js , pero Parece que no se ha actualizado mucho desde su lanzamiento original. Para obtener más información, consulte http://javascriptly.com/2008/ 08 / a-better-javascript-template-engine / .

Dropbox utilizando El motor de plantillas de John Resig en el sitio web. Lo han modificado un poco, puedes consultar este archivo js de dropbox. Busque en este archivo tmpl y obtendrá el código del motor de la plantilla.

Gracias. Espero que sea de utilidad para alguien.

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

http://www.enfusion-framework.org/ (¡mire 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 mediante el uso de selectores de jQuery, lo que es más importante, no requiere poner elementos sofisticados en HTML.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow