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

> La déclaration d'un composant jComponent 20 et ce que son instance (elle-même) offre: propriétés, méthodes de valeur, assistants DOM, événements, observateurs et commandes.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 231dca3125c0d37a63be897b9037b5528620d9e397cf1d1d16ad4c2fed9aa989
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

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 (`self`La configuration (`config`Le même objet que `self.config`et le préfix de la classe (`cls`Cette 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. `unwatch`Si 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.

```html 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>
```