Események küldése komponensek között ON-nal és EMIT-tel

jComponent 20 · jcomponent@20 jcomponentfrontendevents Futtatva a jComponent 20-szal

A globális események lehetővé teszik, hogy egy oldal független részei egymás ismerete nélkül beszélgessenek. Az ON(name, callback) figyelőt regisztrál, az EMIT(name, a, b, c, d) minden figyelőt meghív legfeljebb négy argumentummal, az OFF(name, [callback]) pedig eltávolít egy figyelőt vagy a név összes figyelőjét. A komponenseknek és pluginoknak ugyanezek a függvényeik megvannak a self-en (self.on(), self.emit()), és az általuk regisztrált figyelők a komponenssel együtt törlődnek.

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>

Próbáld ki a böngésződben

Szerkeszd a példát, és futtasd. A böngésződ egy izolált keretében fut; semmi nem kerül a szerverünkre.

Kód

Előnézet