Componenten en plugins uitbreiden met EXTENSION

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Uitgevoerd met jComponent 20

EXTENSION(name, config, callback) voegt code toe aan elke instantie van de component name (of van de plugin @name) wanneer die wordt aangemaakt. De callback krijgt de instantie en haar config, precies als een declaratie, zodat je methoden kunt toevoegen, opties kunt wijzigen of naar events kunt luisteren. Zo past een applicatie componenten van derden aan zonder ze te 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>

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