Κύκλος ζωής ενός συστατικού: make, setter και destroy

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Εκτελέστηκε με jComponent 20

Ένα συστατικό περνά από τρεις στιγμές στις οποίες μπορείτε να παρέμβετε:

το self.make() εκτελείται μία φορά, όταν το συστατικό δημιουργείται και το στοιχείο του είναι έτοιμο: χτίστε εδώ το DOM και καταχωρίστε events
το 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>

Δοκιμάστε το στον browser σας

Επεξεργαστείτε το παράδειγμα και εκτελέστε το. Εκτελείται σε απομονωμένο πλαίσιο στον browser σας· τίποτα δεν στέλνεται στον διακομιστή μας.

Κώδικας

Προεπισκόπηση