Configurarea unei componente și reconfigurarea ei ulterioară

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Executată cu jComponent 20

Al doilea argument al COMPONENT() conține opțiunile implicite. Atributul config al elementului le suprascrie, iar declarația citește valorile îmbinate din config. Implementează self.configure(key, value) ca să reacționezi când o opțiune este setată sau schimbată. La rulare, self.reconfigure('key:value;key2:value2') (sau CONFIG(selector, config) pentru multe componente) schimbă opțiuni și apelează configure pentru fiecare cheie schimbată.

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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare