# Component instantie verwijzing: eigenschappen en methoden van zichzelf

> De verklaring van een jComponent 20 component en wat de instantie (zelf) biedt: eigenschappen, waardenmethoden, DOM-helpers, evenementen, waarnemers en bestellingen.

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

Een component wordt aangegeven met `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`De verklaring loopt één keer voor elke `<ui-component name="...">` van de pagina en ontvangt de instelling (`self`De configuratie (`config`Hetzelfde object als `self.config`en de voorwaarden van de klasse (`cls`Deze pagina bevat wat `self` heeft

## Hooks die je definieert

| Lid | Wanneer het draait |
|---|---|
| `self.make` | eenmaal, wanneer het element klaar is: bouw hier de DOM op |
| `self.setter(value, path, flags)` | telkens wanneer de waarde van het pad verandert, en wanneer het component start; `flags` is een object |
| `self.destroy` | nadat het element is verwijderd (zie het levenscyclusrecept) |

## Eigenschappen

| Eigenschap | Waarde |
|---|---|
| `self.name` | de naam van het component (`probe`) |
| `self.path.path` | het pad als string (`form.name`) |
| `self.element` | het element `<ui-component>` als jQuery-collectie |
| `self.dom` | hetzelfde element als DOM-knoop |
| `self.config` | de configuratie: de standaardwaarden van de declaratie, daarna het attribuut `config` van het element. Ze bevat ook de statusvlaggen: `invalid` vanaf het begin, `modified` en `touched` zodra de waarde wordt gewijzigd |
| `self.id` | een unieke id van de instantie |
| `self.ready` | `true` na `make` |

## De waarde

| Methode | Wat het doet |
|---|---|
| `self.get()` | leest de waarde van het pad |
| `self.set(value)` | schrijft de waarde en voert de `setter` uit van elk component van dat pad, ook dit |
| `self.update()` | voert de `setter` opnieuw uit met de huidige waarde, zonder haar te wijzigen |
| `self.rewrite(value)` | schrijft de waarde **zonder** de `setter` van dit component uit te voeren (de andere worden gemeld) |
| `self.modify(value)` | schrijft de waarde en markeert het component als gewijzigd en aangeraakt: `config.modified` en `config.touched` worden 1 |
| `self.reset()` | wist die vlaggen: `config.modified` en `config.touched` gaan terug naar 0 |
| `self.GET(path)`, `self.SET(path, value)` | lezen en schrijven elk pad van de status |
| `self.EXEC(name, a)` | roept de globale functie `name` aan |

## De DOM van het component

`self.html(html)`, `self.text(text)`, `self.append(html)` en `self.empty()` wijzigen de inhoud. `self.find(selector)` geeft de elementen erin terug als jQuery. `self.css(name, value)` zet een stijl, `self.attr(name, value)` een attribuut en `self.attrd(name, value)` een `data-`-attribuut (`self.attrd('x')` leest `data-x`). De klassen: `self.aclass(name)` voegt toe, `self.rclass(name)` verwijdert, `self.hclass(name)` zegt of het hem heeft, en `self.tclass(name, [state])` schakelt hem om of zet hem op `state`. `self.width()` en `self.height()` geven getallen terug.

## Gebeurtenissen, watchers en commando's

| Methode | Wat het doet |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | luistert naar en verstuurt een benoemde gebeurtenis van de pagina |
| `self.watch(path, fn, [autoinit])` | roept `fn(value, flags, path)` aan wanneer dat pad verandert; met `autoinit` ook eenmaal aan het begin. `+` voegt meerdere paden samen |
| `self.reconfigure('size:9')` | wijzigt de configuratie tijdens runtime: `self.config.size` is 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | registreert een commando van deze instantie en roept het aan |

## Reken hier niet op

- **`self.unwatch(path, [fn])` niet verwijderen van de wacht* in jComponent 20: het vergelijkt de parsede weg van de wachter met een straling, dus niets komt overeen. `unwatch`Als je een wachtman moet stoppen, controleer dan een vlag in. `fn`.
- **Het globale `CMD(name)` riep een met `self.command` geregistreerd commando niet aan**: alleen `self.CMD(name)` deed dat.

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