Como ya les conté antes, estamos en búsqueda de una arquitectura para desarrollo web que incluye ASP.NET MVC, JSON, jQuery y otros.

Dentro de ese proceso, se presenta el siguiente problema. Dede JavaScript se llama a servicios JSON (o AJAX). Una vez recibida la respuesta, se deben agregar elementos HTML a una lista. Un caso práctico sería, por ejemplo, un sistema que muestra una lista dinámica de personas, incluyendo datos personales de cada una.

La manera simple de hacerlo es recorriendo la lista y agregando elementos a una lista (elementos <li> dentro de una lista <ul>). El problema se produce cuando estos elementos son complejos e incluyen elementos como fotografía, tablas, enlaces, botones, etc.

Si la generación estuviera en el lado del servidor, utilizando el modelo clásico ASP.NET (Web forms), se crearían controles de usuario (user controls), los cuales se definen en HTML, se asocian los datos y, finalmente, se agregan a un conteedor. En el caso de JavaScript, utilizando jQuery, el código sería así:

$.each (lista, function (item, i)
{
    var divItem = $("<div>")
        .append ($("<table>")
            .append ($("<tr>")
                .append ("<td>Nombre:</td>")
                .append ($("<td>")
                    .text (item.nombre)))
            .append ($("<tr>")
                .append ("<td>Apellido:</td>")
                .append ($("<td>")
                    .text (item.apellido)))
            .append ($("<tr>")
                .append ("<td>Foto:</td>")
                .append ($("<td>")
                    .append ($("<img>")
                        .attr ("src", item.urlfoto)))));

    divLista.append (divItem);
});

Existen varios problemas con este código, incluyendo mantenibilidad, separación inexistente del código con el layout (HTML + JavaScript), etc. Para solucionar esto, decidimos crear una pequeña aplicación que transforma código HTML a objetos jQuery. Así, tenemos este código de origen:

<div id="principal">
    <table>
        <tr>
            <td>Nombre:</td>
            <td id="celdaNombre" />
        </tr>
        <tr>
            <td>Apellido:</td>
            <td id="celdaApellido" />
        </tr>
        <tr>
            <td>Foto:</td>
            <td><img id="foto" /></td>
        </tr>
    </table>
</div>

Utilizando el generador, esta estructura HTML es transformada en este código JavaScript:

var controlTest = function ()
{
	principal = $('<div>')
		.append ($('<table>')
			.append ($('<tr>')
				.append ($('<td>')
					.append ($('').text ('Nombre:')))
				.append (celdaNombre = $('<td>')))
			.append ($('<tr>')
				.append ($('<td>')
					.append ($('<span>').text ('Apellido:')))
				.append (celdaApellido = $('<td>')))
			.append ($('<tr>')
				.append ($('<td>')
					.append ($('<span>').text ('Foto:')))
				.append ($('<td>')
					.append (foto = $('<img>')))));
	
	this.principal = principal;
	this.celdaNombre = celdaNombre;
	this.celdaApellido = celdaApellido;
	this.foto = foto;
};

Finalmente, podemos utilizarlo de esta manera:

$.each (lista, function (item, i)
{
    var ct = new controlTest ();
    ct.celdaNombre.text (item.nombre);
    ct.celdaApellido.text (item.apellido);
    ct.foto.attr ('src', item.urlfoto);
    divLista.append (ct.principal);
}

Tenemos intenciones de distribuir este generador con una licencia libre. Tendremos noticias pronto.