Regrouper l'état et la logique dans un plugin jComponent

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

Un plugin est le contrôleur d'une section de la page. PLUGIN(name, declaration) l'enregistre et <ui-plugin path="name"> l'attache à un élément. Dans la section, ? dans un chemin signifie « le chemin du plugin », si bien que le balisage ne dépend pas de l'endroit où le plugin vit dans l'état.

La déclaration reçoit self (l'instance du plugin) et config. self.get() et self.set() travaillent relativement au chemin du plugin, et self.element est l'élément jQuery du <ui-plugin>. Implémentez self.make pour exécuter du code une fois le plugin prêt. Utilisez self.element pour les événements DOM : self.on() sert aux événements jComponent, pas aux clics.

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-plugin path="cart">
		<p>Items: <ui-bind path="?.items" config="text:value || 0"></ui-bind></p>
		<button type="button" id="add">Add item</button>
	</ui-plugin>

	<script>

		PLUGIN('cart', function(self) {

			self.add = function() {
				self.set('items', (self.get('items') || 0) + 1);
			};

			// make() runs when the plugin is ready: initialize the state and the events here
			self.make = function() {
				self.set('items', 0);
				self.element.on('click', '#add', self.add);
			};

		});

	</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