Envoyer des événements entre composants avec ON et EMIT

jComponent 20 · jcomponent@20 jcomponentfrontendevents Exécutée avec jComponent 20

Les événements globaux permettent à des parties indépendantes d'une page de communiquer sans se connaître. ON(name, callback) enregistre un écouteur, EMIT(name, a, b, c, d) appelle chaque écouteur avec jusqu'à quatre arguments et OFF(name, [callback]) retire un écouteur ou tous les écouteurs du nom. Les composants et les plugins ont les mêmes fonctions sur self (self.on(), self.emit()), et les écouteurs qu'ils enregistrent sont retirés avec le composant.

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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu