Events tussen componenten sturen met ON en EMIT

jComponent 20 · jcomponent@20 jcomponentfrontendevents Uitgevoerd met jComponent 20

Globale events laten onafhankelijke delen van een pagina met elkaar praten zonder elkaar te kennen. ON(name, callback) registreert een luisteraar, EMIT(name, a, b, c, d) roept elke luisteraar aan met maximaal vier argumenten en OFF(name, [callback]) verwijdert één luisteraar of alle luisteraars van de naam. Componenten en plugins hebben dezelfde functies op self (self.on(), self.emit()), en de luisteraars die ze registreren worden samen met de component verwijderd.

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>

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