Référence d'instance de composant : propriétés et méthodes de self

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

Une composante est déclarée COMPONENT(name, defaultConfig, function(self, config, cls) { ... })La déclaration se déroule une fois pour chaque <ui-component name="..."> Le site est envoyé et reçoit le dossier (selfLa configuration (configLe même objet que self.configet le préfix de la classe (clsCette page présente ce que self Il a.

Hooks que vous définissez

Membre	Quand il s'exécute
`self.make`	une fois, quand l'élément est prêt : construisez le DOM ici
`self.setter(value, path, flags)`	chaque fois que la valeur du chemin change, et au démarrage du composant ; `flags` est un objet
`self.destroy`	après la suppression de l'élément (voir la recette du cycle de vie)

Propriétés

Propriété	Valeur
`self.name`	le nom du composant (`probe`)
`self.path.path`	le chemin sous forme de chaîne (`form.name`)
`self.element`	l'élément `<ui-component>` comme collection jQuery
`self.dom`	le même élément comme nœud du DOM
`self.config`	la configuration : les valeurs par défaut de la déclaration, puis l'attribut `config` de l'élément. Elle contient aussi les drapeaux d'état : `invalid` dès le départ, `modified` et `touched` une fois la valeur modifiée
`self.id`	un id unique de l'instance
`self.ready`	`true` après `make`

La valeur

Méthode	Ce qu'elle fait
`self.get()`	lit la valeur du chemin
`self.set(value)`	écrit la valeur et exécute le `setter` de chaque composant de ce chemin, celui-ci aussi
`self.update()`	exécute de nouveau le `setter` avec la valeur actuelle, sans la changer
`self.rewrite(value)`	écrit la valeur sans exécuter le `setter` de ce composant (les autres sont notifiés)
`self.modify(value)`	écrit la valeur et marque le composant comme modifié et touché : `config.modified` et `config.touched` passent à 1
`self.reset()`	efface ces drapeaux : `config.modified` et `config.touched` repassent à 0
`self.GET(path)`, `self.SET(path, value)`	lisent et écrivent n'importe quel chemin de l'état
`self.EXEC(name, a)`	appelle la fonction globale `name`

Le DOM du composant

self.html(html), self.text(text), self.append(html) et self.empty() changent le contenu. self.find(selector) renvoie les éléments à l'intérieur sous forme jQuery. self.css(name, value) définit un style, self.attr(name, value) un attribut et self.attrd(name, value) un attribut data- (self.attrd('x') lit data-x). Les classes : self.aclass(name) ajoute, self.rclass(name) retire, self.hclass(name) dit si elle est présente, et self.tclass(name, [state]) la bascule ou la fixe à state. self.width() et self.height() renvoient des nombres.

Événements, observateurs et commandes

Méthode	Ce qu'elle fait
`self.on(name, fn)` / `self.emit(name, a)`	écoute et envoie un événement nommé de la page
`self.watch(path, fn, [autoinit])`	appelle `fn(value, flags, path)` quand ce chemin change ; avec `autoinit` aussi une fois au départ. `+` joint plusieurs chemins
`self.reconfigure('size:9')`	change la configuration à l'exécution : `self.config.size` vaut 9
`self.command(name, fn)` / `self.CMD(name, a)`	enregistre une commande de cette instance et l'appelle

N'y comptez pas

**self.unwatch(path, [fn]) Ne supprimez pas le gardien* jComponent 20 : il compare la voie parsée du gardien avec un filet, donc rien ne correspond. unwatchSi vous avez besoin d'arrêter un gardien, vérifiez une drapeau à l'intérieur fn.
Le CMD(name) global n'a pas appelé une commande enregistrée avec self.command : seul self.CMD(name) l'a fait.

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-component name="probe" path="form.name" config="size:3;title:Hello" id="probe"></ui-component>
	<script>
		window.log = {};
		window.events = [];
		COMPONENT('probe', 'size:1;flag:false', function(self, config, cls) {
			window.inst = self;
			self.make = function() {
				self.html('<p class="a">one</p><p class="b">two</p>');
				self.event('click', '.a', function() { window.events.push('click'); });
			};
			self.setter = function(value, path, type) {
				window.events.push('setter:' + value + ':' + path + ':' + type);
			};
		});
		SET('form.name', 'Ann');
	</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