944 063 154

Blog

HTML templates con JQuery

Publicado enDesarrollo web

A veces nos acostumbramos a programar siguiendo un determinado patrón. Por ejemplo, si estás habituado a hacerlo siguiendo MVC, tener que realizar tareas en otro código puede resultarte incómodo. Esto puede ser el caso de hardcodear el código HTML en el código interno de una aplicación; nos resultará, además nada cómodo, poco limpio. Sin embargo, si por el contrario, sueles utilizar JavaScript, estarás mal acostumbrado a ver código limpio; como puede ser el siguiente script:


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 HTML que queremos dinamizar desde JavaScript.

Escribiendo código HTML desde JavaScript

Una solución consiste en escribir el  HTML que vamos a reutilizar desde JavaScript; con una serie de patrones que sustituiremos más adelante por los valores que nos interesen. Para ello, podemos recurrir a la biblioteca multiplataforma JQuery de JavaScript. En este caso, si quisiéramos rellenar un elemento como el siguiente <ul> deberíamos recurrir al script que mostramos a continuación:


<ul id="list"></ul>

Junto antes de terminar el body colocaríamos el siguiente bloque de código HTML:


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

   }

}