# Odkaz na inštanciu komponentu: vlastnosti a metódy seba

> Vyhlásenie zložky jComponent 20 a to, čo jej príklad (samozrejme) ponúka: vlastnosti, metódy hodnoty, pomocníci DOM, udalosti, pozorovatelia a príkazy.

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

Súčasťou je vyhlásenie `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Vyhlásenie prebieha raz za každú `<ui-component name="...">` na stránke a prijímajú príkaz (`self`a jeho konfigurácia (`config`rovnaký objekt ako `self.config`a predpísané triedy (`cls`Táto stránka uvádza, čo `self` Má sa.

## Háčiky, ktoré definujete

| Člen | Kedy sa spustí |
|---|---|
| `self.make` | raz, keď je element pripravený: tu zostavte DOM |
| `self.setter(value, path, flags)` | zakaždým, keď sa hodnota cesty zmení, a keď komponent štartuje; `flags` je objekt |
| `self.destroy` | po odstránení elementu (pozri recept o životnom cykle) |

## Vlastnosti

| Vlastnosť | Hodnota |
|---|---|
| `self.name` | názov komponentu (`probe`) |
| `self.path.path` | cesta ako reťazec (`form.name`) |
| `self.element` | element `<ui-component>` ako kolekcia jQuery |
| `self.dom` | ten istý element ako uzol DOM |
| `self.config` | konfigurácia: predvolené hodnoty deklarácie, potom atribút `config` elementu. Obsahuje aj príznaky stavu: `invalid` od začiatku, `modified` a `touched`, keď sa hodnota zmení |
| `self.id` | jedinečné id inštancie |
| `self.ready` | `true` po `make` |

## Hodnota

| Metóda | Čo robí |
|---|---|
| `self.get()` | číta hodnotu cesty |
| `self.set(value)` | zapíše hodnotu a spustí `setter` každého komponentu tejto cesty, aj tohto |
| `self.update()` | znova spustí `setter` s aktuálnou hodnotou, bez jej zmeny |
| `self.rewrite(value)` | zapíše hodnotu **bez** spustenia `setter` tohto komponentu (ostatné sa upozornia) |
| `self.modify(value)` | zapíše hodnotu a označí komponent ako zmenený a dotknutý: `config.modified` a `config.touched` sa stanú 1 |
| `self.reset()` | vymaže tieto príznaky: `config.modified` a `config.touched` sa vrátia na 0 |
| `self.GET(path)`, `self.SET(path, value)` | čítajú a zapisujú ľubovoľnú cestu stavu |
| `self.EXEC(name, a)` | zavolá globálnu funkciu `name` |

## DOM komponentu

`self.html(html)`, `self.text(text)`, `self.append(html)` a `self.empty()` menia obsah. `self.find(selector)` vráti elementy vnútri ako jQuery. `self.css(name, value)` nastaví štýl, `self.attr(name, value)` atribút a `self.attrd(name, value)` atribút `data-` (`self.attrd('x')` číta `data-x`). Triedy: `self.aclass(name)` pridá, `self.rclass(name)` odstráni, `self.hclass(name)` povie, či ju má, a `self.tclass(name, [state])` ju prepne alebo nastaví na `state`. `self.width()` a `self.height()` vracajú čísla.

## Udalosti, sledovače a príkazy

| Metóda | Čo robí |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | počúva a posiela pomenovanú udalosť stránky |
| `self.watch(path, fn, [autoinit])` | zavolá `fn(value, flags, path)`, keď sa tá cesta zmení; s `autoinit` aj raz na začiatku. `+` spája viac ciest |
| `self.reconfigure('size:9')` | zmení konfiguráciu za behu: `self.config.size` je 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | zaregistruje príkaz tejto inštancie a zavolá ho |

## Nespoliehajte sa na tieto

- **`self.unwatch(path, [fn])` Neodstrániť stráž * jComponent 20: porovnáva parsed cestu striekača s pruhom, takže nič sa nezhoduje. `unwatch`Ak potrebujete zastaviť strážcu, skontrolujte vlajku vo vnútri `fn`.
- **Globálny `CMD(name)` nezavolal príkaz registrovaný cez `self.command`**: zavolal ho iba `self.CMD(name)`.

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