Path prefixes: common, code lists, temporary state and plugin paths

jComponent 20 · jcomponent@20 jcomponentfrontendpathsstate Executed with jComponent 20

A path is where a value lives in the state of the page, and in jComponent 20 its first character can change the place.

Prefix	Example	Where it points
`*`	`*user.name`	the common state: `common.user.name` (`*` alone is `common`)
`#`	`#countries`	the code lists: `DEF.cl.countries`, where `CL()` stores the lists it loads
`%`	`%step`	the temporary state: `DEF.tmp.step`, for values that do not belong to the model
`?`	`?.items`	inside a `<ui-plugin>`: the path of that plugin (see the plugin recipe)
`plugin\`	path	`cart\`	items	a property of the plugin object called `cart`, from anywhere: `PLUGINS["cart"].items` (it is not the state path `cart.items`)

The flags of a path (@visible, @change...) are a different thing: they come after a space (see the custom flags recipe). Paths without a prefix are plain paths of the state (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>

Try it in your browser

Edit the example and run it. It runs in an isolated frame in your browser; nothing is sent to our server.

Code

Preview