# Il riferimento del componente: proprietà e metodi di se stessi

> La dichiarazione di un componente jComponent 20 e ciò che la sua instanza (sono) offre: proprietà, metodi di valore, assistenti DOM, eventi, osservatori e comandi.

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

Un componente è dichiarato con `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`La dichiarazione si svolge una volta per ogni `<ui-component name="...">` La pagina è stata pubblicata e viene presentata (`self`La sua configurazione (`config`Lo stesso oggetto come `self.config`e la classe prefiammata (`cls`Questa pagina elenca ciò che `self` ha

## Hook che definisci

| Membro | Quando viene eseguito |
|---|---|
| `self.make` | una volta, quando l'elemento è pronto: costruisci qui il DOM |
| `self.setter(value, path, flags)` | ogni volta che il valore del percorso cambia, e quando il componente parte; `flags` è un oggetto |
| `self.destroy` | dopo che l'elemento è stato rimosso (vedi la ricetta del ciclo di vita) |

## Proprietà

| Proprietà | Valore |
|---|---|
| `self.name` | il nome del componente (`probe`) |
| `self.path.path` | il percorso come stringa (`form.name`) |
| `self.element` | l'elemento `<ui-component>` come collezione jQuery |
| `self.dom` | lo stesso elemento come nodo del DOM |
| `self.config` | la configurazione: i valori predefiniti della dichiarazione, poi l'attributo `config` dell'elemento. Contiene anche i flag di stato: `invalid` dall'inizio, `modified` e `touched` una volta modificato il valore |
| `self.id` | un id univoco dell'istanza |
| `self.ready` | `true` dopo `make` |

## Il valore

| Metodo | Cosa fa |
|---|---|
| `self.get()` | legge il valore del percorso |
| `self.set(value)` | scrive il valore ed esegue il `setter` di ogni componente di quel percorso, anche questo |
| `self.update()` | esegue di nuovo il `setter` con il valore corrente, senza cambiarlo |
| `self.rewrite(value)` | scrive il valore **senza** eseguire il `setter` di questo componente (gli altri vengono notificati) |
| `self.modify(value)` | scrive il valore e segna il componente come modificato e toccato: `config.modified` e `config.touched` diventano 1 |
| `self.reset()` | azzera quei flag: `config.modified` e `config.touched` tornano a 0 |
| `self.GET(path)`, `self.SET(path, value)` | leggono e scrivono qualsiasi percorso dello stato |
| `self.EXEC(name, a)` | chiama la funzione globale `name` |

## Il DOM del componente

`self.html(html)`, `self.text(text)`, `self.append(html)` e `self.empty()` cambiano il contenuto. `self.find(selector)` restituisce gli elementi interni come jQuery. `self.css(name, value)` imposta uno stile, `self.attr(name, value)` un attributo e `self.attrd(name, value)` un attributo `data-` (`self.attrd('x')` legge `data-x`). Le classi: `self.aclass(name)` aggiunge, `self.rclass(name)` rimuove, `self.hclass(name)` dice se ce l'ha, e `self.tclass(name, [state])` la alterna o la imposta a `state`. `self.width()` e `self.height()` restituiscono numeri.

## Eventi, osservatori e comandi

| Metodo | Cosa fa |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | ascolta e invia un evento con nome della pagina |
| `self.watch(path, fn, [autoinit])` | chiama `fn(value, flags, path)` quando quel percorso cambia; con `autoinit` anche una volta all'inizio. `+` unisce più percorsi |
| `self.reconfigure('size:9')` | cambia la configurazione a runtime: `self.config.size` è 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | registra un comando di questa istanza e lo chiama |

## Non fare affidamento su questi

- **`self.unwatch(path, [fn])` Non rimuove il monitor* jComponent 20: paragona la strada parsata del guardiano con una corda, quindi nulla si adatta. `unwatch`Se hai bisogno di fermarti, controlla una bandiera all'interno. `fn`.
- **Il `CMD(name)` globale non ha chiamato un comando registrato con `self.command`**: solo `self.CMD(name)` l'ha fatto.

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