Levenscyclus van een component: make, setter en destroy

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Uitgevoerd met jComponent 20

Een component doorloopt drie momenten waarop je kunt ingrijpen:

self.make() draait één keer, wanneer de component wordt aangemaakt en zijn element klaar is: bouw hier de DOM en registreer events
self.setter(value, path, type) draait telkens wanneer de waarde van het path verandert (ook de eerste keer)
self.destroy() draait nadat het element uit de pagina is verwijderd: stop timers en geef vrij wat je hebt gemaakt. jComponent detecteert verwijderde elementen met een opschoning die elke minuut draait; roep FREE() aan om haar direct uit te voeren

self.readonly() vertelt jComponent dat de component nooit naar zijn path schrijft, wat zijn validatiestatus uitschakelt.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld