Écrire un composant jComponent personnalisé

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

Un composant se déclare avec COMPONENT(name, config, declaration). Le deuxième argument est la configuration par défaut sous forme de chaîne (key:value;key:value). La déclaration reçoit self (l'instance du composant) et config (la configuration analysée).

self.make s'exécute une fois, quand le composant est créé. Construisez ici le DOM.
self.setter(value) s'exécute chaque fois que la valeur du path du composant change.
self.set(value) écrit une nouvelle valeur dans le path ; self.get() la lit.

Utilisez le composant avec un élément <ui-component>. name choisit la déclaration, path l'état et config remplace les valeurs par défaut.

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>

Le ui-bind à côté du composant montre que les deux lisent le même état : un clic sur le bouton modifie le chemin et chaque élément qui y est lié se met à jour.

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