Konfigurera en komponent och omkonfigurera den senare

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

Det andra argumentet till COMPONENT() innehåller standardalternativen. Elementets attribut config åsidosätter dem, och deklarationen läser de sammanslagna värdena från config. Implementera self.configure(key, value) för att reagera när ett alternativ sätts eller ändras. Under körning ändrar self.reconfigure('key:value;key2:value2') (eller CONFIG(selector, config) för många komponenter) alternativ och anropar configure för varje ändrad nyckel.

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="badge" config="label:Sale"></ui-component>
	<ui-component name="badge" id="second"></ui-component>

	<script>

		COMPONENT('badge', 'color:blue;label:New', function(self, config) {

			self.make = function() {
				self.html('<b class="label"></b>');
				self.draw();
			};

			self.draw = function() {
				self.find('.label').text(config.label).css('color', config.color);
			};

			self.configure = function(key, value) {
				self.find('.label').length && self.draw();
			};

		});

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