Eine eigene jComponent schreiben

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

Eine Komponente wird mit COMPONENT(name, config, declaration) deklariert. Das zweite Argument ist die Standardkonfiguration als String (key:value;key:value). Die Deklaration erhält self (die Komponenteninstanz) und config (die geparste Konfiguration).

self.make läuft einmal, wenn die Komponente erstellt wird. Baue hier das DOM auf.
self.setter(value) läuft jedes Mal, wenn sich der Wert des path der Komponente ändert.
self.set(value) schreibt einen neuen Wert in den path; self.get() liest ihn.

Nutze die Komponente mit einem <ui-component>-Element. name wählt die Deklaration, path den State und config überschreibt die Standardwerte.

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>

Das ui-bind neben der Komponente zeigt, dass beide denselben State lesen: Ein Klick auf den Button ändert den Pfad, und jedes daran gebundene Element aktualisiert sich.

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