Préfixes de route: courants, listes de code, étapes temporaires et plugins

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

Un chemin est là où une valeur vit dans l'état de la page, et dans jComponent 20 son premier caractère peut changer le lieu.

Préfixe	Exemple	Ce qu'il désigne
`*`	`*user.name`	l'état commun : `common.user.name` (`*` seul est `common`)
`#`	`#countries`	les listes de codes : `DEF.cl.countries`, où `CL()` range les listes qu'il charge
`%`	`%step`	l'état temporaire : `DEF.tmp.step`, pour des valeurs qui n'appartiennent pas au modèle
`?`	`?.items`	dans un `<ui-plugin>` : le chemin de ce plugin (voir la recette des plugins)
`plugin\`	path	`cart\`	items	une propriété de l'objet plugin nommé `cart`, de n'importe où : `PLUGINS["cart"].items` (ce n'est pas le chemin d'état `cart.items`)

Les drapeaux d'un chemin (@visible, @change...) sont autre chose : ils viennent après une espace (voir la recette des drapeaux personnalisés). Les chemins sans préfixe sont des chemins ordinaires de l'état (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>

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