Code mit Commands und EXEC aufrufen

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

Zwei Wege, Code ohne direkte Referenz auf das besitzende Objekt auszulösen:

Eine Komponente registriert ein Command mit self.command(name, fn), und der Code, der die Komponenteninstanz hält, führt es mit instance.CMD(name, a, b, c) aus (element[0].$uicomponent ist die Instanz eines ui-component). Nutze es für Aktionen wie "öffne dieses Fenster" oder "aktualisiere jene Liste". Das globale CMD(name) soll jede Komponente erreichen, schneidet in jComponent 20.014 aber einen Namen ohne Leerzeichen ab und tut deshalb nichts: Nutze die Instanz oder EXEC().
EXEC('plugin/method', a, b) ruft die Methode method des Plugins auf, das am Pfad plugin lebt; ein einfacher Funktionsname (EXEC('myfunction')) ruft eine globale Funktion auf. Das Kommando exec von ui-bind und die Option exec vieler Komponenten akzeptieren dieselben 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>

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