# Referință de exemplu: proprietăți și metode de sine

> Declarația unui component jComponent 20 și ceea ce oferă instanta sa: proprietăți, metode de valoare, asistente DOM, evenimente, monitorizatori și comenzi.

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

Un element este declarat cu `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Declaraţia se desfăşoară o dată pentru fiecare `<ui-component name="...">` de pe pagina de referință și primesc instanța (`self`Configurarea acestuia (`config`Acelaşi obiect ca şi `self.config`În cazul în care prefixul de clasă (`cls`Această pagină prezintă ceea ce `self` are .

## Hook-uri pe care le definești

| Membru | Când rulează |
|---|---|
| `self.make` | o dată, când elementul este gata: construiește aici DOM-ul |
| `self.setter(value, path, flags)` | de fiecare dată când se schimbă valoarea căii și când pornește componenta; `flags` este un obiect |
| `self.destroy` | după ce elementul a fost eliminat (vezi rețeta ciclului de viață) |

## Proprietăți

| Proprietate | Valoare |
|---|---|
| `self.name` | numele componentei (`probe`) |
| `self.path.path` | calea ca șir (`form.name`) |
| `self.element` | elementul `<ui-component>` ca o colecție jQuery |
| `self.dom` | același element ca nod DOM |
| `self.config` | configurația: valorile implicite ale declarației, apoi atributul `config` al elementului. Conține și flagurile de stare: `invalid` de la început, `modified` și `touched` odată ce valoarea este modificată |
| `self.id` | un id unic al instanței |
| `self.ready` | `true` după `make` |

## Valoarea

| Metodă | Ce face |
|---|---|
| `self.get()` | citește valoarea căii |
| `self.set(value)` | scrie valoarea și rulează `setter`-ul fiecărei componente a acelei căi, și pe acesta |
| `self.update()` | rulează din nou `setter`-ul cu valoarea curentă, fără a o schimba |
| `self.rewrite(value)` | scrie valoarea **fără** a rula `setter`-ul acestei componente (celelalte sunt notificate) |
| `self.modify(value)` | scrie valoarea și marchează componenta ca modificată și atinsă: `config.modified` și `config.touched` devin 1 |
| `self.reset()` | șterge acele flaguri: `config.modified` și `config.touched` revin la 0 |
| `self.GET(path)`, `self.SET(path, value)` | citesc și scriu orice cale a stării |
| `self.EXEC(name, a)` | apelează funcția globală `name` |

## DOM-ul componentei

`self.html(html)`, `self.text(text)`, `self.append(html)` și `self.empty()` schimbă conținutul. `self.find(selector)` returnează elementele dinăuntru ca jQuery. `self.css(name, value)` setează un stil, `self.attr(name, value)` un atribut și `self.attrd(name, value)` un atribut `data-` (`self.attrd('x')` citește `data-x`). Clasele: `self.aclass(name)` adaugă, `self.rclass(name)` elimină, `self.hclass(name)` spune dacă o are, iar `self.tclass(name, [state])` o comută sau o setează la `state`. `self.width()` și `self.height()` returnează numere.

## Evenimente, observatori și comenzi

| Metodă | Ce face |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | ascultă și trimite un eveniment cu nume al paginii |
| `self.watch(path, fn, [autoinit])` | apelează `fn(value, flags, path)` când acea cale se schimbă; cu `autoinit` și o dată la început. `+` unește mai multe căi |
| `self.reconfigure('size:9')` | schimbă configurația în timpul execuției: `self.config.size` este 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | înregistrează o comandă a acestei instanțe și o apelează |

## Nu te baza pe acestea

- **`self.unwatch(path, [fn])` Nu se îndepărtează de ceară* jComponent 20: compară calea parsată a păzitorului cu o linie, astfel încât nimic nu se potrivește. `unwatch`Dacă aveți nevoie să opriți un gardian, verificați o steagă în interior `fn`.
- **`CMD(name)` global nu a apelat o comandă înregistrată cu `self.command`**: doar `self.CMD(name)` a făcut-o.

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