Ciclo de vida de elementos creados con Polymer

En pasados artículos, hemos hablado largo y tendido de la librería Polymer. Hoy vamos a entrar con detalle en un aspecto concreto y determinante en el desarrollo de elementos con esta librería: su ciclo de vida y la manera de asociar funciones con código para ejecutar durante sus posibles y diferentes estados.

Realmente, el ciclo de vida de un elemento de Polymer depende en mayor parte del estándar sobre el que está escrita la librería, los Web Components. Los Custom Elements, una de las especificaciones de Web Components, ya implementan diferentes estados que son heredados por Polymer, a los que la librería agrega otro nuevo. A medida que se atraviesen estas fases, podremos programar las funciones “callback” que nos permitirán realizar acciones en nuestros desarrollos, como explicamos más adelante en este mismo artículo.

  • Created: Este instante se da cuando el elemento se crea en la memoria del navegador. No confundir con el momento en el que el elemento se inserta dentro de un documento, que podría ser diferente.
  • Attached: Este momento es en el que el elemento se adjunta dentro de la estructura del documento (DOM).
  • Detached: Ocurre en el instante en el que el elemento se retira del DOM.
  • attributeChanged: Ocurre cada vez que uno de sus atributos (no las propiedades de componentes declaradas con Polymer, sino los atributos que están en el HTML) cambia de valor. Es útil sobre todo para atributos estándar del HTML, porque para las propiedades generadas por Polymer se vigilan los cambios por medio de mecanismos como los observadores.
  • Ready: este momento del ciclo de vida no está especificado en el estándar. Es algo propio de Polymer. Se produce en el momento en el que el componente está completamente inicializado. Es decir, cuando el elemento se crea, aún Polymer debe hacer su trabajo, generando todas las propiedades, ejecutando métodos para calcular sus valores, etc. Una vez que termina su trabajo, entonces ocurre el instante “Ready”.

Puedes ver estos distintos momentos del ciclo de vida como lo que se conoce como “hooks”, ventanas abiertas en las que podemos ejecutar código para realizar diversas acciones que sean necesarias para aprimorar el funcionamiento de los componentes. Para ello se pueden enganchar funciones que contendrán el código a ejecutar cuando se produzcan esos estados, algo que en la terminología Javascript se conoce como funciones “callback”.

Las callback para los momentos del ciclo de vida se crean como cualquier otro método de un elemento Polymer, por medio de funciones que se definen en el objeto que se envía para registrar un elemento.

Lo mejor para observar el ciclo de vida de los elementos Polymer es definir uno con todos los hooks definidos, enviando mensajes a la consola para saber cuándo se producen los diferentes estados.

<link rel="import" href="/blogbower_components/polymer/polymer.html">
<dom-module id="ciclo-vida-elemento">
<template>
<style>
:host {
display: block;
}
</style>
<p>Probando el ciclo de vida...</p>
</template>
<script>
Polymer({
is: "ciclo-vida-elemento",
properties: {
prop: {
type: String,
value: 'Hola'
}
},
created: function() {
console.log('Un elemento se ha creado');
},
ready: function() {
console.log('Un elemento ' + this.is + ' está listo');
},
attached: function() {
console.log('El elemento se ha introducido en el DOM');
},
detached: function() {
console.log('El elemento se ha retirado del DOM');
},
attributeChanged: function() {
console.log('Un atributo ha cambiado');
}
});
</script>
</dom-module>

Solo con insertar el componente en la página observaremos que se producen varios mensajes en la consola:

  • Un elemento se ha creado
  • Un elemento ciclo-vida-elemento está listo
  • El elemento se ha introducido en el DOM

mensajes de consola

Para ver los otros momentos del ciclo de vida harían falta controles por los cuales modificar sus propiedades y sacar elementos del DOM. Para ello usamos métodos nativos de Javascript para manipulación del DOM, como los conocidos createElement(), setAttribute(), etc.

El próximo código ilustra un demo del componente ciclo-vida-elememento, en el que además se han incorporado tres botones para ejecutar mecanismos sobre el componente, que derivarán en cambios de estado y mensajes en la consola para advertirlos.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ciclo de vida demo</title>
<link rel="import" href="/blogciclo-vida-elememento.html">
</head>
<body>
<ciclo-vida-elemento></ciclo-vida-elemento>
<button id="cambiarProp">cambiar propiedad id</button>
<button id="quitarDOM">quitar el elemento del DOM</button>
<button id="crearElemento">crear un elemento,  solo en memoria</button>
<script>
window.onload = function() {
document.getElementById('cambiarProp').addEventListener('click', function() {
document.querySelector('ciclo-vida-elemento').setAttribute('id', 'valor');
});
document.getElementById('quitarDOM').addEventListener('click', function() {
document.body.removeChild(document.querySelector('ciclo-vida-elemento'));
});
document.getElementById('crearElemento').addEventListener('click', function() {
document.createElement('ciclo-vida-elemento');
});
}
</script>
</body>
</html>
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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