Ciclo de vida de un componente: make, setter y destroy

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Ejecutada con jComponent 20

Un componente pasa por tres momentos en los que puedes intervenir:

self.make() se ejecuta una vez, cuando el componente se crea y su elemento está listo: construye aquí el DOM y registra los eventos
self.setter(value, path, type) se ejecuta cada vez que cambia el valor del path (también la primera vez)
self.destroy() se ejecuta después de que el elemento se quitó de la página: detén temporizadores y libera lo que creaste. jComponent detecta los elementos quitados con una limpieza que se ejecuta cada minuto; llama a FREE() para ejecutarla de inmediato

self.readonly() le dice a jComponent que el componente nunca escribe en su path, lo que desactiva su estado de validación.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<div id="host"><ui-component name="clock" path="time.now"></ui-component></div>

	<script>

		var log = [];

		COMPONENT('clock', function(self, config) {

			var timer;

			self.readonly();

			self.make = function() {
				log.push('make');
				timer = setInterval(function() {}, 1000);
			};

			self.setter = function(value) {
				log.push('setter:' + value);
				self.html('<span>' + value + '</span>');
			};

			self.destroy = function() {
				log.push('destroy');
				clearInterval(timer);
			};

		});

		SET('time.now', '10:00');

	</script>

</body>
</html>

Pruébalo en tu navegador

Edita el ejemplo y ejecútalo. Se ejecuta en un marco aislado de tu navegador; no se envía nada a nuestro servidor.

Código

Vista previa