# Komponenteninstanzreferenz: Eigenschaften und Methoden von self

> Die Erklärung eines jComponent 20 Komponenten und was seine Instanz (selbst) bietet: Eigenschaften, Wertmethoden, DOM-Hilfer, Ereignisse, Beobachter und Befehl.

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

Eine Komponente wird mit `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Die Erklärung läuft einmal für jeden `<ui-component name="...">` Auf der Seite und empfängt die Instanz (`self`Ihre Konfiguration (`config`Das gleiche Objekt wie `self.config`und die Klasse (`cls`Diese Seite zeigt, was `self` hat es.

## Hooks, die du definierst

| Mitglied | Wann es läuft |
|---|---|
| `self.make` | einmal, wenn das Element bereit ist: baue hier das DOM auf |
| `self.setter(value, path, flags)` | jedes Mal, wenn sich der Wert des Pfads ändert, und wenn die Komponente startet; `flags` ist ein Objekt |
| `self.destroy` | nachdem das Element entfernt wurde (siehe das Lebenszyklus-Rezept) |

## Eigenschaften

| Eigenschaft | Wert |
|---|---|
| `self.name` | der Name der Komponente (`probe`) |
| `self.path.path` | der Pfad als String (`form.name`) |
| `self.element` | das Element `<ui-component>` als jQuery-Sammlung |
| `self.dom` | dasselbe Element als DOM-Knoten |
| `self.config` | die Konfiguration: die Standardwerte der Deklaration, dann das Attribut `config` des Elements. Sie enthält auch die Zustands-Flags: `invalid` von Anfang an, `modified` und `touched`, sobald der Wert geändert wird |
| `self.id` | eine eindeutige ID der Instanz |
| `self.ready` | `true` nach `make` |

## Der Wert

| Methode | Was sie tut |
|---|---|
| `self.get()` | liest den Wert des Pfads |
| `self.set(value)` | schreibt den Wert und führt den `setter` jeder Komponente dieses Pfads aus, auch dieser |
| `self.update()` | führt den `setter` erneut mit dem aktuellen Wert aus, ohne ihn zu ändern |
| `self.rewrite(value)` | schreibt den Wert **ohne** den `setter` dieser Komponente auszuführen (die anderen werden benachrichtigt) |
| `self.modify(value)` | schreibt den Wert und markiert die Komponente als geändert und berührt: `config.modified` und `config.touched` werden zu 1 |
| `self.reset()` | löscht diese Flags: `config.modified` und `config.touched` gehen zurück auf 0 |
| `self.GET(path)`, `self.SET(path, value)` | lesen und schreiben jeden Pfad des Zustands |
| `self.EXEC(name, a)` | ruft die globale Funktion `name` auf |

## Das DOM der Komponente

`self.html(html)`, `self.text(text)`, `self.append(html)` und `self.empty()` ändern den Inhalt. `self.find(selector)` gibt die darin liegenden Elemente als jQuery zurück. `self.css(name, value)` setzt einen Style, `self.attr(name, value)` ein Attribut und `self.attrd(name, value)` ein `data-`-Attribut (`self.attrd('x')` liest `data-x`). Die Klassen: `self.aclass(name)` fügt hinzu, `self.rclass(name)` entfernt, `self.hclass(name)` sagt, ob sie vorhanden ist, und `self.tclass(name, [state])` schaltet sie um oder setzt sie auf `state`. `self.width()` und `self.height()` geben Zahlen zurück.

## Ereignisse, Beobachter und Befehle

| Methode | Was sie tut |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | hört auf ein benanntes Ereignis der Seite und sendet es |
| `self.watch(path, fn, [autoinit])` | ruft `fn(value, flags, path)` auf, wenn sich dieser Pfad ändert; mit `autoinit` auch einmal zu Beginn. `+` verbindet mehrere Pfade |
| `self.reconfigure('size:9')` | ändert die Konfiguration zur Laufzeit: `self.config.size` ist 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | registriert einen Befehl dieser Instanz und ruft ihn auf |

## Verlasse dich nicht darauf

- **`self.unwatch(path, [fn])` Sie entfernen nicht den Watcher* in jComponent 20: Es vergleicht den Parsedweg des Wachers mit einem String, so dass nichts entspricht. `unwatch`Wenn Sie einen Wacher stoppen müssen, überprüfen Sie eine Flagge in `fn`.
- **Das globale `CMD(name)` rief einen mit `self.command` registrierten Befehl nicht auf**: Nur `self.CMD(name)` tat es.

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