Cuando te acostumbras a programar siguiendo el patrón MVC, te resulta incómodo y poco limpio el hardcodear Html en el código interno de la aplicación.
Si embargo en JavaScript, estamos mal acostumbrados a ver códigos como el siguiente:
var html = "<li class='" + class + "'>" +
"<input type='text' id='"+ id +"' /></li>";
Aunque el código en sí no es incorrecto, cuando tenemos que realizar cambios en nuestra aplicación (situación bastante común) sin volvernos locos, necesitaremos separar o hacer más mantenible ese código html que queremos dinamizar desde javascript.
Una solución consiste en escribir el código html que vamos a reutilizar desde javascript, con una serie de patrones que sustituiremos más adelante por los valores que nos interesen.
Por ejemplo, si quisiéramos rellenar el siguiente elemento <ul>
<ul id="list"></ul>
Junto antes de terminar el body colocaríamos el siguiente bloque de código
<div id="bloque_lista" style="display:none">
<li class="|class|">
<input type=”text” id=”input|row_id|” />
</li>
</div>
Para rellenar la lista, bastaría con sustituir los patrones |class| y |row_id| por los valores que necesitemos.
function addItemToList() {
var list = $('#list');
var class = "rosa";
var template = $('#bloque_lista').html();
template = template.replace(/\|class\|/gi, class)
for(var id=1;id<11;id++){
list.append(template.replace(/\|row_id\|/gi, id));
}
}
Saludos, Asier Marqués
— Posted by Asier Marqués | Posted in Desarrollo web | Posted on December 25, 2009
