Templates de HTML con jQuery

Cuando el proyecto deja de ser algo sencillo, es importante empezar a pensar en separar la interfaz de la lógica, usar plantillas es el primer paso. Para cuando se necesita tener un sistema de plantillas, en el caso de javascript hay diferentes librerías que sirven para ello. Pero en este caso voy a hacerlo sólo con jQuery.

Lo primero es definir la plantilla, por ejemplo:

<script id="hidden-template" type="text/x-custom-template">
<div class="col-sm-4 col-xs-12">
    <div class="item-image">
        <img />
    </div>
</div>
</script>

Ojo a la primera y última linea, está dentro de un <script> así no se tendrá en cuenta por navegadores ni buscadores.

La siguiente y última parte es aplicar esa plantilla:

// Se recoje el tpl...
var template = $('#hidden-template').html();

// ...se clona para poderlo modificar...
var item = $(template).clone();

// ...se modifica lo que sea necesario...
item.find("img").attr('src', 'https://...');

// ... y se incrusta donde se quiera
$('#target').append(itemTemplate);

Y ya está, se puede usar tantas veces como se quiera.




Josep Viciana

Programador de 28 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

No hay comentarios


Puedes dejar el primero : )



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *