Skicka events mellan komponenter med ON och EMIT

jComponent 20 · jcomponent@20 jcomponentfrontendevents Körd med jComponent 20

Globala events låter oberoende delar av en sida prata utan att känna varandra. ON(name, callback) registrerar en lyssnare, EMIT(name, a, b, c, d) anropar varje lyssnare med upp till fyra argument och OFF(name, [callback]) tar bort en lyssnare eller alla lyssnare för namnet. Komponenter och plugins har samma funktioner på self (self.on(), self.emit()), och de lyssnare de registrerar tas bort tillsammans med komponenten.

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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning