Dragon Microframework — Parte III
El evento render y la configuración del componente.
Al momento de definir un componente es importante recuperar información externa al componente para configurarlo o reconfigurarlo de acuerdo a los datos enviados hacia el componente. Esto lo podemos lograr suscribiendónos a un evento especial llamado @render que es envíado una vez que está montado el componente. La forma de hacerlo, es especificando un objeto o variable de configuración y enviarlo al momento de contrucción del componente. Dentro de la plantilla del componente deberemos registrar al padre para que escuche al evento render y recupere la configuración.
Para escuchar eventos de un componente DOM podemos hacer uso de addEventListener y para generar eventos podemos usar dispatchEvent y enviar eventos del tipo CustomEvent. Sin embargo, la librería Dragon.js dispone un método para controlar los eventos de un elemento DOM y reducir la complejidad.
Dentro de la lógica del componente primero debemos recuperar el elementoparent del componente. Después deberemos definir un controlador de eventos para dicho elemento generando un parentHandler. Finalmente podremos suscribirnos y disparar eventos mediante el controlador y los métodos subscribe y fire. Observa que handler.subscribe(channel, callback) recibe el canal o el nombre del evento de suscripción y un callback que recibe los datos asociados al evento. Por ejemplo, al suscribirnos al evento @render recibimos en el callback el objeto config envíado al momento de crear el componente.
Observa la siguiente aplicación en la que se define un botón, que al recibir la configuración en el evento render se suscribe al evento click del botón para enviar un mensaje personalizado con la configuración enviada.
El controlador de eventos de dragon puede ser utilizado sobre cualquier elemento DOM, por lo que también es posible suscribirse a los mismos eventos DOM de los elementos como click.
Observa que en la organización, primero recuperamos los elementos DOM dentro del componente, luego definimos sus controladores de eventos, para finalmente suscribir todos los eventos lógicos generados en la aplicación.
Si te gustó está entrega no olvides apoyarme.
