Configurer un composant et le reconfigurer plus tard

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Exécutée avec jComponent 20

Le deuxième argument de COMPONENT() contient les options par défaut. L'attribut config de l'élément les remplace, et la déclaration lit les valeurs fusionnées depuis config. Implémentez self.configure(key, value) pour réagir quand une option est définie ou modifiée. À l'exécution, self.reconfigure('key:value;key2:value2') (ou CONFIG(selector, config) pour de nombreux composants) modifie des options et appelle configure pour chaque clé modifiée.

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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu