restcontroller - Marcos de plantillas del lado del cliente para simplificar usando jQuery con REST/JSON
que es spring rest (3)
Estoy empezando a migrar algunas tareas de generación html desde un marco del lado del servidor al cliente. Estoy usando jQuery en el cliente. Mi objetivo es obtener datos JSON a través de una API REST y utilizar estos datos para llenar HTML en la página.
En este momento, cuando un usuario de mi sitio hace clic en un enlace a Mis proyectos , el servidor genera HTML de esta manera:
<dl>
<dt>Clean Toilet</dt>
<dd>Get off your butt and clean this filth!</dd>
<dt>Clean Car</dt>
<dd>I think there''s something growing in there...</dd>
<dt>Replace Puked on Baby Sheets</dt>
</dl>
Estoy cambiando esto para que al hacer clic en Mis proyectos ahora haga una solicitud GET que arroje algo como esto:
[
{
"name":"Clean Car",
"description":"I think there''s something growing in there..."
},
{
"name":"Clean Toilets",
"description":"Get off your butt and clean this filth!"
},
{
"name":"Replace Puked on Baby Sheets"
}
]
Ciertamente puedo escribir el código jQuery personalizado para tomar ese JSON y generar el HTML a partir de él. Esta no es mi pregunta, y no necesito consejos sobre cómo hacer eso.
Lo que me gustaría hacer es separar por completo la presentación y el diseño de la lógica (código jquery). No quiero crear elementos DL, DT y DD a través del código jQuery. Prefiero usar algún tipo de plantillas HTML en las que pueda completar los datos. Estas plantillas podrían ser simplemente fragmentos de HTML que están ocultos en la página desde la que se cargó la aplicación. O podrían cargarse dinámicamente desde el servidor (para admitir diseños específicos del usuario, i18n, etc.). Podrían mostrarse una sola vez, así como permitir el bucle y la repetición. Tal vez debería ser compatible con las sub-plantillas, si / then / else, y así sucesivamente.
Tengo MUCHAS listas y contenido en mi sitio que se presentan de muchas maneras diferentes. Estoy buscando crear una forma simple y consistente para generar y mostrar contenido sin crear código jQuery personalizado para cada característica diferente en mi sitio. Para mí, esto significa que necesito encontrar o crear un pequeño marco sobre jQuery (probablemente como un complemento) que cumpla con estos requisitos.
El único tipo de marco que he encontrado que se parece a esto es jTemplates . No sé qué tan bueno es, ya que aún no lo he usado. A primera vista, no estoy emocionado por su sintaxis de plantilla.
¿Alguien sabe de otros frameworks o complementos que debería investigar? ¿Alguna publicación en el blog u otros recursos que discutan sobre este tipo de cosas? Solo quiero asegurarme de haber examinado todo por ahí antes de construirlo yo mismo.
¡Gracias!
Desde que publiqué esta pregunta, he encontrado muchas otras opciones de plantillas. He enumerado muchos de ellos a continuación. Sin embargo, recientemente hubo una propuesta de plantillas jQuery que puede ser la solución más prometedora. También hay una discusión al respecto en el sitio de jquery. Aquí está la ubicación del proyecto:
Otras soluciones que he encontrado incluyen (sin ningún orden en particular):
- http://www.west-wind.com/weblog/posts/509108.aspx
- http://ejohn.org/blog/javascript-micro-templating/
- http://beebole.com/pure/
- http://archive.plugins.jquery.com/project/jTemplates
- http://archive.plugins.jquery.com/project/advancedmerge
- http://archive.plugins.jquery.com/project/tempest
- http://archive.plugins.jquery.com/project/jBind
- http://archive.plugins.jquery.com/project/cliche
- http://archive.plugins.jquery.com/project/appendDom
- http://archive.plugins.jquery.com/project/openSocial-jquery-templates
- http://archive.plugins.jquery.com/project/Orange-J
- http://archive.plugins.jquery.com/project/fromTemplate-microtemplate
- http://archive.plugins.jquery.com/project/resiglet
- http://archive.plugins.jquery.com/project/databind
- http://archive.plugins.jquery.com/project/jsont
- http://archive.plugins.jquery.com/project/domplate
- http://archive.plugins.jquery.com/project/noTemplate
- http://archive.plugins.jquery.com/project/jQueryHtmlTemplates
- http://github.com/trix/nano
- http://aefxx.com/jquery-plugins/jqote/
- http://ajaxian.com/archives/chainjs-jquery-data-binding-service
- http://ajaxpatterns.org/Browser-Side_Templating
- http://beebole.com/pure/
- http://code.google.com/p/google-jstemplate/
- http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
- http://embeddedjs.com/
- Sistema de plantillas de Javascript: PURE, EJS, jquery plugin?
- jQuery motores de plantillas
- http://goessner.net/articles/jsont/
He usado jTemplates bastantes veces y, según mi experiencia, cumple con su objetivo.
Si limitamos la discusión al lado del cliente, este es mi último comentario sobre el asunto, ya que hace el trabajo y, a pesar de la sintaxis funky, lo hace bien, sin embargo, en el lado del servidor definitivamente preferiría el escenario donde PUBLICAR JSON que se deserializa a un objeto en memoria y luego se valida y pasa a una plantilla del lado del servidor (como ASCX en ASP.NET) donde tiene toda la potencia de ese idioma.
En mi opinión, si el cliente admite JavaScript lo suficiente como para que considere jTemplates, le recomendaría configurar un método de utilidad de JavaScript que le permita enviar JSON y recibir HTML, con lo que se eliminará al intermediario potencialmente problemático. La mayoría de los lenguajes tienen capacidad de análisis JSON y jQuery puede analizar automáticamente una respuesta del servidor en JSON especificando el tipo de retorno como "json".
Incluso si no recibe el JSON del JavaScript, aún puede tomar el JSON que habría enviado de vuelta al navegador y simplemente enviarlo a través de su plantilla del lado del servidor. En ASP.NET (con MVC, por ejemplo), puede tener archivos de plantilla fuertemente tipados que no necesitan compilarse, lo que hace que los cambios sean mucho más fáciles de implementar. Por lo tanto, todavía estaría enviando el marcado, pero se habría ejecutado a través de una plantilla adecuada con toda la fuerza de un lenguaje de programación detrás de él.
Parece que quieres sammy.js
http://code.quirkey.com/sammy/
Los tutoriales allí uso de demostración del motor de plantillas