Жизнен цикъл на компонент: make, setter и destroy

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Изпълнено с jComponent 20

Един компонент преминава през три момента, в които можете да се намесите:

self.make() се изпълнява веднъж, когато компонентът е създаден и елементът му е готов: изградете тук DOM и регистрирайте събития
self.setter(value, path, type) се изпълнява всеки път, когато стойността на path се промени (и за първи път)
self.destroy() се изпълнява, след като елементът е премахнат от страницата: спрете таймерите и освободете създаденото. jComponent открива премахнатите елементи с почистване, което се изпълнява всяка минута; извикайте FREE(), за да го изпълните веднага

self.readonly() казва на jComponent, че компонентът никога не пише в своя път (path), което изключва състоянието му за валидиране.

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>

Опитайте в браузъра си

Редактирайте примера и го изпълнете. Работи в изолирана рамка във вашия браузър; нищо не се изпраща към нашия сървър.

Код

Преглед