# Składnik odniesienia: właściwości i metody samego siebie

> Deklaracja składnika jComponent 20 i to, co jego instancja (sam) oferuje: właściwości, metody wartości, pomocniki DOM, wydarzenia, obserwatorzy i polecenia.

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

Część została ogłoszona `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Deklaracja odbywa się raz dla każdego `<ui-component name="...">` W tym miejscu i przyjmując wniosek (`self`• jego konfiguracja (`config`Ten sam obiekt jak `self.config`a) w klasie przedstawionej (`cls`Ta strona przedstawia, co `self` Ma się

## Haki, które definiujesz

| Składnik | Kiedy się uruchamia |
|---|---|
| `self.make` | raz, gdy element jest gotowy: tutaj zbuduj DOM |
| `self.setter(value, path, flags)` | za każdym razem, gdy zmienia się wartość ścieżki, i gdy komponent startuje; `flags` to obiekt |
| `self.destroy` | po usunięciu elementu (zobacz przepis o cyklu życia) |

## Właściwości

| Właściwość | Wartość |
|---|---|
| `self.name` | nazwa komponentu (`probe`) |
| `self.path.path` | ścieżka jako ciąg (`form.name`) |
| `self.element` | element `<ui-component>` jako kolekcja jQuery |
| `self.dom` | ten sam element jako węzeł DOM |
| `self.config` | konfiguracja: wartości domyślne deklaracji, potem atrybut `config` elementu. Zawiera też flagi stanu: `invalid` od początku, `modified` i `touched`, gdy wartość zostanie zmodyfikowana |
| `self.id` | unikalne id instancji |
| `self.ready` | `true` po `make` |

## Wartość

| Metoda | Co robi |
|---|---|
| `self.get()` | czyta wartość ścieżki |
| `self.set(value)` | zapisuje wartość i uruchamia `setter` każdego komponentu tej ścieżki, także tego |
| `self.update()` | uruchamia `setter` ponownie z bieżącą wartością, bez jej zmiany |
| `self.rewrite(value)` | zapisuje wartość **bez** uruchamiania `setter` tego komponentu (pozostałe są powiadamiane) |
| `self.modify(value)` | zapisuje wartość i oznacza komponent jako zmodyfikowany i dotknięty: `config.modified` i `config.touched` stają się 1 |
| `self.reset()` | czyści te flagi: `config.modified` i `config.touched` wracają do 0 |
| `self.GET(path)`, `self.SET(path, value)` | czytają i zapisują dowolną ścieżkę stanu |
| `self.EXEC(name, a)` | wywołuje funkcję globalną `name` |

## DOM komponentu

`self.html(html)`, `self.text(text)`, `self.append(html)` i `self.empty()` zmieniają zawartość. `self.find(selector)` zwraca elementy wewnątrz jako jQuery. `self.css(name, value)` ustawia styl, `self.attr(name, value)` atrybut, a `self.attrd(name, value)` atrybut `data-` (`self.attrd('x')` czyta `data-x`). Klasy: `self.aclass(name)` dodaje, `self.rclass(name)` usuwa, `self.hclass(name)` mówi, czy ją ma, a `self.tclass(name, [state])` przełącza ją lub ustawia na `state`. `self.width()` i `self.height()` zwracają liczby.

## Zdarzenia, obserwatorzy i polecenia

| Metoda | Co robi |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | nasłuchuje i wysyła nazwane zdarzenie strony |
| `self.watch(path, fn, [autoinit])` | wywołuje `fn(value, flags, path)`, gdy ta ścieżka się zmienia; z `autoinit` także raz na początku. `+` łączy kilka ścieżek |
| `self.reconfigure('size:9')` | zmienia konfigurację w czasie działania: `self.config.size` to 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | rejestruje polecenie tej instancji i je wywołuje |

## Nie polegaj na tych

- **`self.unwatch(path, [fn])` Nie wyciąga się zegarka* jComponent 20: porównuje parsed ścieżkę strażnika z pasem, więc nic się nie zgadza. `unwatch`Jeśli chcesz zatrzymać strażnika, sprawdź flagę wewnątrz `fn`.
- **Globalne `CMD(name)` nie wywołało polecenia zarejestrowanego przez `self.command`**: zrobiło to tylko `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>
```