Path Prefix: gemeinsame, Code-Listen, vorübergehende Status und Plugin-Paths

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

Ein Weg ist, wo ein Wert im Zustand der Seite lebt, und in jComponent 20 sein erster Charakter kann den Ort ändern.

Präfix	Beispiel	Worauf es zeigt
`*`	`*user.name`	der gemeinsame Zustand: `common.user.name` (`*` allein ist `common`)
`#`	`#countries`	die Code-Listen: `DEF.cl.countries`, wo `CL()` die geladenen Listen ablegt
`%`	`%step`	der temporäre Zustand: `DEF.tmp.step`, für Werte, die nicht zum Modell gehören
`?`	`?.items`	innerhalb eines `<ui-plugin>`: der Pfad dieses Plugins (siehe das Plugin-Rezept)
`plugin\`	path	`cart\`	items	eine Eigenschaft des Plugin-Objekts namens `cart`, von überall: `PLUGINS["cart"].items` (es ist nicht der Zustandspfad `cart.items`)

Die Flags eines Pfads (@visible, @change...) sind etwas anderes: Sie stehen nach einem Leerzeichen (siehe das Rezept zu eigenen Flags). Pfade ohne Präfix sind normale Pfade des Zustands (user.name).

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-bind path="*user.name" config="text:value" class="common"></ui-bind>
	<ui-bind path="#greeting" config="text:value" class="cl"></ui-bind>
	<ui-bind path="%step" config="text:value" class="tmp"></ui-bind>
	<ui-bind path="plain.value" config="text:value" class="plain"></ui-bind>

	<ui-plugin path="cart">
		<ui-bind path="?.items" config="text:value" class="own"></ui-bind>
	</ui-plugin>

	<script>
		PLUGIN('cart', function(self) {});
		SET('*user.name', 'Peter');
		SET('#greeting', 'Hello');
		SET('%step', 3);
		SET('plain.value', 'plain');
		SET('cart.items', 7);
	</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