Enviar eventos entre componentes com ON e EMIT

jComponent 20 · jcomponent@20 jcomponentfrontendevents Executada com jComponent 20

Os eventos globais permitem que partes independentes de uma página falem sem se conhecerem. ON(name, callback) regista um ouvinte, EMIT(name, a, b, c, d) chama todos os ouvintes com até quatro argumentos e OFF(name, [callback]) remove um ouvinte ou todos os ouvintes do nome. Os componentes e os plugins têm as mesmas funções em self (self.on(), self.emit()), e os ouvintes que registam são removidos juntamente com o componente.

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>

Experimente no seu navegador

Edite o exemplo e execute-o. Corre numa moldura isolada do seu navegador; nada é enviado para o nosso servidor.

Código

Pré-visualização