Scrivere un componente jComponent personalizzato

jComponent 20 · jcomponent@20 jcomponentfrontendcomponents Eseguita con jComponent 20

Un componente si dichiara con COMPONENT(name, config, declaration). Il secondo argomento è la configurazione predefinita come stringa (key:value;key:value). La dichiarazione riceve self (l'istanza del componente) e config (la configurazione interpretata).

self.make viene eseguito una volta, quando il componente viene creato. Costruisci qui il DOM.
self.setter(value) viene eseguito ogni volta che cambia il valore del path del componente.
self.set(value) scrive un nuovo valore nel path; self.get() lo legge.

Usa il componente con un elemento <ui-component>. name seleziona la dichiarazione, path lo stato e config sovrascrive i valori predefiniti.

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="counter" path="cart.count" config="step:2"></ui-component>
	<p>Total: <ui-bind path="cart.count" config="text:value"></ui-bind></p>

	<script>

		COMPONENT('counter', 'step:1', function(self, config) {

			self.make = function() {
				self.html('<button type="button">Add</button> <b class="value">0</b>');
				self.event('click', 'button', function() {
					self.set((self.get() || 0) + config.step);
				});
			};

			self.setter = function(value) {
				self.find('.value').text(value || 0);
			};

		});

		SET('cart.count', 10);

	</script>

</body>
</html>

Il ui-bind accanto al componente mostra che entrambi leggono lo stesso stato: un clic sul pulsante cambia il percorso e si aggiorna ogni elemento legato ad esso.

Provalo nel tuo browser

Modifica l'esempio ed eseguilo. Gira in un frame isolato del tuo browser; nulla viene inviato al nostro server.

Codice

Anteprima