Lebenszyklus einer Komponente: make, setter und destroy

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Mit jComponent 20 ausgeführt

Eine Komponente durchläuft drei Momente, in die du eingreifen kannst:

self.make() läuft einmal, wenn die Komponente erstellt wird und ihr Element bereit ist: Baue hier das DOM auf und registriere Events
self.setter(value, path, type) läuft jedes Mal, wenn sich der Wert des path ändert (auch beim ersten Mal)
self.destroy() läuft, nachdem das Element aus der Seite entfernt wurde: Stoppe Timer und gib frei, was du erstellt hast. jComponent erkennt entfernte Elemente mit einer Bereinigung, die jede Minute läuft; rufe FREE() auf, um sie sofort auszuführen

self.readonly() sagt jComponent, dass die Komponente nie in ihren Pfad schreibt, was ihren Validierungszustand abschaltet.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau