Komponenten und Plugins mit EXTENSION erweitern

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

EXTENSION(name, config, callback) fügt jeder Instanz der Komponente name (oder des Plugins @name) beim Erstellen Code hinzu. Der Callback erhält die Instanz und ihre Config, genau wie eine Deklaration, sodass du Methoden hinzufügen, Optionen ändern oder auf Events hören kannst. So passt eine Anwendung Komponenten von Drittanbietern an, ohne sie zu forken.

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="label" config="text:Hello"></ui-component>

	<script>

		COMPONENT('label', 'text:', function(self, config) {
			self.make = function() {
				self.html('<span></span>');
				self.find('span').text(config.text);
			};
		});

		EXTENSION('label', 'suffix:!', function(self, config) {
			self.shout = function() {
				self.find('span').text(config.text.toUpperCase() + config.suffix);
			};
			self.extended = true;
		});

	</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