Een component configureren en later herconfigureren

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Uitgevoerd met jComponent 20

Het tweede argument van COMPONENT() bevat de standaardopties. Het attribuut config van het element overschrijft ze, en de declaratie leest de samengevoegde waarden uit config. Implementeer self.configure(key, value) om te reageren wanneer een optie wordt gezet of gewijzigd. Tijdens het draaien wijzigt self.reconfigure('key:value;key2:value2') (of CONFIG(selector, config) voor veel componenten) opties en roept configure aan voor elke gewijzigde sleutel.

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>

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