Component lifecycle: make, setter and destroy

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Executed with jComponent 20

A component goes through three moments you can hook into:

self.make() runs once, when the component is created and its element is ready: build the DOM and register events here
self.setter(value, path, type) runs every time the value of the path changes (also the first time)
self.destroy() runs after the element was removed from the page: stop timers and release what you created. jComponent detects removed elements with a cleanup that runs every minute; call FREE() to run it immediately

self.readonly() tells jComponent the component never writes to its path, which turns off its validation state.

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>

Try it in your browser

Edit the example and run it. It runs in an isolated frame in your browser; nothing is sent to our server.

Code

Preview