Path prefixes: gemeenschappelijke, code lijsten, tijdelijke status en plugins paden

jComponent 20 · jcomponent@20 jcomponentfrontendpathsstate Uitgevoerd met jComponent 20

Een pad is waar een waarde in de staat van de pagina leeft, en in jComponent 20 kan zijn eerste karakter de plaats veranderen.

Voorvoegsel	Voorbeeld	Waar het naar wijst
`*`	`*user.name`	de gedeelde status: `common.user.name` (`*` alleen is `common`)
`#`	`#countries`	de codelijsten: `DEF.cl.countries`, waar `CL()` de lijsten opslaat die het laadt
`%`	`%step`	de tijdelijke status: `DEF.tmp.step`, voor waarden die niet bij het model horen
`?`	`?.items`	binnen een `<ui-plugin>`: het pad van die plugin (zie het pluginrecept)
`plugin\`	path	`cart\`	items	een eigenschap van het pluginobject genaamd `cart`, van overal: `PLUGINS["cart"].items` (het is niet het statuspad `cart.items`)

De flags van een pad (@visible, @change...) zijn iets anders: ze komen na een spatie (zie het recept over eigen flags). Paden zonder voorvoegsel zijn gewone paden van de status (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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld