Utöka komponenter och plugins med EXTENSION

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Körd med jComponent 20

EXTENSION(name, config, callback) lägger till kod i varje instans av komponenten name (eller pluginet @name) när den skapas. Callbacken får instansen och dess config, precis som en deklaration, så du kan lägga till metoder, ändra alternativ eller lyssna på events. Så anpassar en applikation tredjepartskomponenter utan att forka dem.

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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning