Αποστολή events μεταξύ συστατικών με ON και EMIT

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

Τα καθολικά events επιτρέπουν σε ανεξάρτητα τμήματα μιας σελίδας να μιλούν χωρίς να γνωρίζουν το ένα το άλλο. Το ON(name, callback) καταχωρίζει έναν ακροατή, το EMIT(name, a, b, c, d) καλεί κάθε ακροατή με έως τέσσερα ορίσματα και το OFF(name, [callback]) αφαιρεί έναν ακροατή ή όλους τους ακροατές του ονόματος. Τα συστατικά και τα plugins έχουν τις ίδιες συναρτήσεις στο self (self.on(), self.emit()) και οι ακροατές που καταχωρίζουν αφαιρούνται μαζί με το συστατικό.

EMIT('cart.changed', 3)   ->   ON('cart.changed', function(count) { ... })

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>
	<ui-component name="counter"></ui-component>
	<p class="shown"></p>

	<script>

		var received = [];

		COMPONENT('counter', function(self) {
			self.make = function() {
				self.html('<button type="button">+1</button>');
				var count = 0;
				self.find('button').on('click', function() {
					EMIT('cart.changed', ++count, 'button');
				});
			};
		});

		function listener(count, source) {
			received.push(count + ':' + source);
			$('.shown').text('Count: ' + count);
		}

		ON('cart.changed', listener);

	</script>

</body>
</html>

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

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

Κώδικας

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