Events zwischen Komponenten mit ON und EMIT senden

jComponent 20 · jcomponent@20 jcomponentfrontendevents Mit jComponent 20 ausgeführt

Globale Events lassen unabhängige Teile einer Seite miteinander sprechen, ohne einander zu kennen. ON(name, callback) registriert einen Listener, EMIT(name, a, b, c, d) ruft jeden Listener mit bis zu vier Argumenten auf und OFF(name, [callback]) entfernt einen Listener oder alle Listener des Namens. Komponenten und Plugins haben dieselben Funktionen auf self (self.on(), self.emit()), und die von ihnen registrierten Listener werden mit der Komponente entfernt.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau