index for data jquery templates jsrender

jquery - for - jsrender if



Motores de plantillas jQuery (19)

Acabo de hacer una investigación sobre esto y github.com/jquery/jquery-tmpl . ¿Por qué?

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

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

Estoy buscando un motor de plantilla para usar el lado del cliente. He estado probando algunas plantillas como jsRepeater y jQuery. Si bien parecen funcionar 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?

Actualmente estoy usando un marco de plantillas multi 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!)

Depende de cómo defina "mejor", consulte mi publicación here sobre el tema

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

Si buscas el plugin de JQuery más oficial , esto es lo que descubrí

Parte I: Plantillas JQuery

La versión beta, temporarily-official plantilla de JQuery, fue este depreciated

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 documentos permanecen aquí por el momento (para referencia) hasta que esté listo un complemento de plantilla de reemplazo adecuado.

Parte II: El siguiente paso.

El nuevo mapa de ruta parece apuntar a un nuevo conjunto de complementos, JSRender (independiente del DOM e incluso el motor de representación de plantillas JQuery) y JSViews que tienen algún enlace de datos agradable e implementación de patrones observadores / 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.

Otros recursos

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 plantillas y enlace de UI

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

Existe 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 utilizado 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 con él.

PURE listado 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 versión original. Para obtener más información, consulte http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

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

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

Otros han señalado jquery-tmpl, y yo he votado esas respuestas. Pero asegúrese de echar un vistazo a las horquillas Github.

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

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

Si estás buscando un complemento de plantillas más completo, te sugeriría Orange-J . Fue inspirado por Freemarker. Admite si, de lo contrario, realiza un bucle sobre 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.

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

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

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, en su mayoría utilizando selectores de jQuery, lo que es más importante, no requiere poner cosas extravagantes en HTML.

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

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

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

Gracias por la punta, 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 la cadena:

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

Página de prueba...

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

Gracias. Espero que sea de utilidad para alguien.