Eine Komponente konfigurieren und später neu konfigurieren

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

Das zweite Argument von COMPONENT() enthält die Standardoptionen. Das Attribut config des Elements überschreibt sie, und die Deklaration liest die zusammengeführten Werte aus config. Implementiere self.configure(key, value), um zu reagieren, wenn eine Option gesetzt oder geändert wird. Zur Laufzeit ändert self.reconfigure('key:value;key2:value2') (oder CONFIG(selector, config) für viele Komponenten) Optionen und ruft configure für jeden geänderten Schlüssel auf.

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>

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