Den State lesen, ändern und beobachten

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

Der State ist ein globales Objekt, das über Pfade wie cart.items adressiert wird. Die Funktionen dafür:

SET(path, value) schreibt einen Wert und benachrichtigt alles, was an den Pfad gebunden ist
GET(path) liest einen Wert
UPD(path) benachrichtigt den Pfad, nachdem du das Objekt an Ort und Stelle geändert hast (GET('cart').discount = 5; UPD('cart'))
PUSH(path, value) hängt an ein Array an und benachrichtigt; mit einem ^ vor dem Pfad wird der Wert am Anfang eingefügt
WATCH(path, callback) führt den Callback mit dem neuen Wert bei jeder Änderung des Pfads aus; mehrere Pfade verbindest du mit +

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>
	<p><ui-bind path="cart.items" config="text:value ? value.length + ' items' : 'empty'"></ui-bind></p>

	<script>

		var log = [];

		WATCH('cart.items', function(value) {
			log.push(value.length);
		});

		SET('cart.items', []);
		PUSH('cart.items', 'book');
		PUSH('^cart.items', 'pen');

		GET('cart.items').push('lamp');
		UPD('cart.items');

	</script>

</body>
</html>

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