JsRender: plantillas HTML mediante JavaScript

JsRender es una librería javascript que nos permite utilizar plantillas de código en nuestra pagina web. Puede ser muy útil a la hora de añadir filas nuevas a una tabla, o añadir campos nuevos a un formulario de forma dinámica, por ejemplo.

En mi caso, utilizo JsRender para cargar formularios modales, con lo que consigo tener separado el código de la web del código del formulario, y lo que me permite reutilizar el segundo.

Veamos como se utiliza esta librería.


Lo primero es incluir la librería en nuestra aplicación web:

Después, definimos la plantilla que queremos utilizar:

La sintaxis es muy sencilla, indicamos en el type que se trata de una plantilla de JsRender, y creamos nuestra plantilla y de le damos un identificador.

Podemos definir variables que tomaran el valor que pasemos posteriormente, para ello tenemos que declararlas entre llaves de la siguiente forma: {{>variable}}
Mediante el símbolo #index accedemos al indice del loop que recorre el array de valores que aplicaremos a la plantilla. Como veis, JsRender también entiende funciones matemáticas.

Dentro del codigo javascript de nuestra pagina, necesitamos cargar un array con los valores que queremos aplicar a nuestra plantilla, y llamar a la funcion, logicamente:

Hemos creado un array de 3 posiciones, con un mapa en cada una ellas donde pasamos los valores deseados para las variables que hemos declarado en la plantilla. Obviamente, los key de los maps tienen que coincidir con las variables definidas.

Por último, seleccionamos la plantilla y llamamos a la función render, pasándole como parámetro el array con nuestros valores. La función nos devolverá el innerText que queremos pintar.

Solo queda seleccionar donde queremos pintar dicho código y aplicarlo.

De esta forma, tenemos la plantilla definida en la misma pagina que nuestra web. Como ya he comentado al principio, podemos separar la plantilla a un fichero externo, y cargarla mediante el método GET de jQuery. Para ello hacemos lo siguiente:

    
var file = "/resources/plantillas/miplantilla.html"
$.when($.get(file))
    .done(function(plantilla) {
     $.templates({tmpl: plantilla});
     $(document.body).append($.render.tmpl(movies));
});

En este último caso, se añade el código de la plantilla al final de la página web.

Ya veis que se trata de una librería muy potente y muy fácil de usar.

Podéis encontrar más información sobre JsRender aquí.