Démarrer avec jComponent 20

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

jComponent 20 est un seul fichier (spa.min@20.js) qui contient déjà jQuery. Il garde un objet d'état global : vous y écrivez avec SET(path, value), vous le lisez avec GET(path), et les éléments réagissent aux changements. Le bundle comprend aussi une feuille de style, spa.min@20.css, avec la police d'icônes Total.js.

<ui-bind> lie un élément à un chemin de l'état. L'attribut config liste des commandes séparées par des points-virgules ; text:value définit le texte de l'élément avec la valeur du chemin. Chargez les deux depuis le CDN, comme le fait chaque exemple de ce site : <script src="//cdn.componentator.com/spa.min@20.js"></script> et <link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />. Si vous ne voulez que les icônes, chargez seulement //cdn.componentator.com/icons.min.css (aucun script n'est nécessaire). Les vérifications de ce site répondent aux requêtes de spa.min@20.js et spa.min@20.css avec une copie locale de la même version et ne chargent pas le fichier d'icônes.

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>

Appelez à nouveau SET('user.name', 'Louis') et le titre change sans aucun code DOM de votre part.

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