Get started with jComponent 20

jComponent 20 · jcomponent@20 jcomponentfrontendbinding Executed with jComponent 20

jComponent 20 is a single file (spa.min@20.js) that already contains jQuery. It keeps a global state object: you write to it with SET(path, value), read from it with GET(path), and elements react to changes. The bundle also has a stylesheet, spa.min@20.css, with the Total.js icon font. Load both from the CDN, as every example of this site does: <script src="//cdn.componentator.com/spa.min@20.js"></script> and <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. If you only want the icons, load just //cdn.componentator.com/icons.min.css (no script is needed). The checks of this site answer the requests for spa.min@20.js and spa.min@20.css with a local copy of the same version and do not load the icons file.

<ui-bind> binds an element to a path in the state. The config attribute lists commands separated by semicolons; text:value sets the text of the element to the value of the path.

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>

	<h1>Hello <ui-bind path="user.name" config="text:value"></ui-bind></h1>

	<script>
		SET('user.name', 'Peter');
	</script>

</body>
</html>

Call SET('user.name', 'Louis') again and the heading changes without any DOM code of yours.

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