Trimiterea de evenimente între componente cu ON și EMIT

jComponent 20 · jcomponent@20 jcomponentfrontendevents Executată cu jComponent 20

Evenimentele globale lasă părți independente ale unei pagini să comunice fără să se cunoască. ON(name, callback) înregistrează un ascultător, EMIT(name, a, b, c, d) apelează fiecare ascultător cu până la patru argumente, iar OFF(name, [callback]) elimină un ascultător sau toți ascultătorii numelui. Componentele și plugin-urile au aceleași funcții pe self (self.on(), self.emit()), iar ascultătorii pe care îi înregistrează se elimină odată cu componenta.

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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare