Code aanroepen met commando's en EXEC

jComponent 20 · jcomponent@20 jcomponentfrontendcommands Uitgevoerd met jComponent 20

Twee manieren om code te activeren zonder directe verwijzing naar het object dat hem bezit:

Een component registreert een commando met self.command(name, fn), en de code die de component-instantie vasthoudt, voert het uit met instance.CMD(name, a, b, c) (element[0].$uicomponent is de instantie van een ui-component). Gebruik het voor acties als "open dit venster" of "ververs die lijst". De globale CMD(name) is bedoeld om elke component te bereiken, maar in jComponent 20.014 knipt hij een naam zonder spatie af en doet daarom niets: gebruik de instantie of EXEC().
EXEC('plugin/method', a, b) roept de methode method aan van de plugin die op het pad plugin leeft; een gewone functienaam (EXEC('myfunction')) roept een globale functie aan. Het commando exec van ui-bind en de optie exec van veel componenten accepteren dezelfde namen.

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-plugin path="cart">
		<p>Items: <ui-bind path="?.count" config="text:value"></ui-bind></p>
	</ui-plugin>
	<ui-component name="notice" id="notice"></ui-component>

	<script>

		PLUGIN('cart', function(self) {
			self.add = function(n) {
				self.set('count', (self.get('count') || 0) + n);
			};
			self.make = function() {
				self.set('count', 0);
			};
		});

		COMPONENT('notice', function(self) {
			self.make = function() {
				self.html('<i class="text"></i>');
				self.command('say', function(text) {
					self.find('.text').text(text);
				});
			};
		});

		function logout(arg) {
			window.loggedout = arg;
		}

	</script>

</body>
</html>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld