# Az összetevő példája: tulajdonságok és módszerek önmaguk

> A jComponent 20 komponens nyilatkozatát és azt, amit az eset (mag) kínál: tulajdonságok, értékmódszerek, DOM segédeszközök, események, megfigyelők és parancsok.

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

Az összetevőket a `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`A nyilatkozat egyszer minden egyes `<ui-component name="...">` Az oldalról és az ügyfelekről (`self`A konfiguráció (`config`Ugyanaz a tárgy, mint `self.config`Az osztály előírása (`cls`Ez az oldal felsorolja, hogy mi `self` Van egy

## A te általad definiált hookok

| Tag | Mikor fut |
|---|---|
| `self.make` | egyszer, amikor az elem kész: itt építsd fel a DOM-ot |
| `self.setter(value, path, flags)` | minden alkalommal, amikor az útvonal értéke változik, és amikor a komponens elindul; a `flags` egy objektum |
| `self.destroy` | az elem eltávolítása után (lásd az életciklus receptet) |

## Tulajdonságok

| Tulajdonság | Érték |
|---|---|
| `self.name` | a komponens neve (`probe`) |
| `self.path.path` | az útvonal sztringként (`form.name`) |
| `self.element` | a `<ui-component>` elem jQuery gyűjteményként |
| `self.dom` | ugyanaz az elem DOM-csomópontként |
| `self.config` | a konfiguráció: a deklaráció alapértékei, majd az elem `config` attribútuma. Az állapotjelzőket is tartalmazza: `invalid` a kezdettől, `modified` és `touched`, amint az érték módosul |
| `self.id` | a példány egyedi azonosítója |
| `self.ready` | `true` a `make` után |

## Az érték

| Metódus | Mit csinál |
|---|---|
| `self.get()` | beolvassa az útvonal értékét |
| `self.set(value)` | kiírja az értéket, és lefuttatja az útvonal minden komponensének `setter` függvényét, ezét is |
| `self.update()` | újra lefuttatja a `setter` függvényt a jelenlegi értékkel, az érték megváltoztatása nélkül |
| `self.rewrite(value)` | kiírja az értéket úgy, hogy **nem** futtatja ennek a komponensnek a `setter` függvényét (a többit értesíti) |
| `self.modify(value)` | kiírja az értéket, és módosítottnak és megérintettnek jelöli a komponenst: a `config.modified` és a `config.touched` 1 lesz |
| `self.reset()` | törli ezeket a jelzőket: a `config.modified` és a `config.touched` visszamegy 0-ra |
| `self.GET(path)`, `self.SET(path, value)` | az állapot bármely útvonalát olvassák és írják |
| `self.EXEC(name, a)` | meghívja a `name` globális függvényt |

## A komponens DOM-ja

A `self.html(html)`, `self.text(text)`, `self.append(html)` és `self.empty()` a tartalmat változtatják. A `self.find(selector)` jQuery-ként adja vissza a benne lévő elemeket. A `self.css(name, value)` stílust állít, a `self.attr(name, value)` attribútumot, a `self.attrd(name, value)` pedig `data-` attribútumot (a `self.attrd('x')` a `data-x` értékét olvassa). Az osztályok: a `self.aclass(name)` hozzáad, a `self.rclass(name)` eltávolít, a `self.hclass(name)` megmondja, hogy megvan-e, a `self.tclass(name, [state])` pedig átkapcsolja vagy `state` értékre állítja. A `self.width()` és a `self.height()` számokat ad vissza.

## Események, megfigyelők és parancsok

| Metódus | Mit csinál |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | figyel és küld egy az oldalon elnevezett eseményt |
| `self.watch(path, fn, [autoinit])` | meghívja az `fn(value, flags, path)` függvényt, amikor az útvonal változik; `autoinit` esetén egyszer az elején is. A `+` több útvonalat fűz össze |
| `self.reconfigure('size:9')` | futásidőben megváltoztatja a konfigurációt: a `self.config.size` értéke 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | regisztrál egy parancsot ehhez a példányhoz, és meghívja |

## Ne támaszkodj ezekre

- **`self.unwatch(path, [fn])` nem távolítja el a szemetet** a jComponent 20: összehasonlítja a szemét parsized útját egy sorral, így semmi nem felel meg. A szemét továbbra is fut `unwatch`. Ha meg kell állítania a szemet, ellenőrizze a zászlót a `fn`-ban.
- **A globális `CMD(name)` nem hívta meg a `self.command` hívással regisztrált parancsot**: csak a `self.CMD(name)` tette.

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