John Resig dio una platica en FOWA(Future of the web apps) donde anuncio 3 cosas importantes en la siguiente versión de jQuery. Tendra un Templating engine, una manera de ligar datos a un elemento del Dom y jQuery Mobile que sera liberado a fin del 2010.
Hoy tuve un rato para jugar con el templating engine, que se encuentra hoy como plug in hosteado en GitHub y la documentación ya se encuentra disponible en jQuery.com.
Consiste en 3 sencillos pasos:
Crear mi template y después compilarlo:
var markup = " <li><strong>${Name}</strong> (${ReleaseYear})</li> "; // Compile the markup as a named template $.template( "movieTemplate", markup );
Después obtener mi información:
var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ];
Renderearlo y agregarlo al DOM:
$.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" );
La información puede obtenerse por medio de ajax o jsonp. Esta manera de trabajar me agrada mucho mas que generar el dom para cada elementos y es mucho mas eficiente por que el template se logra optimizar y ademas solo se pega una vez al DOM.
En algún momento había probado Mustache.js que funciona con los {} de una manera muy similar. Tenemos la posibilidad de agregar each, if y else dentro del template, ademas de algunas cosas mas que no me dio tiempo de probar.
Espero que esto les permita realizar web apps de manera mas concisa y sencilla. Espero tener tiempo para jugar con el Data binder pronto.
Related posts: