# Referência de instância componente: propriedades e métodos de si mesmo

> A declaração de um componente jComponent 20 e o que sua instância (se) oferece: propriedades, métodos de valor, auxiliares DOM, eventos, observadores e comandos.

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

Um componente é declarado com `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`A declaração é feita uma vez por cada `<ui-component name="...">` A partir da página e recebendo a instância (`self`A sua configuração (`config`O mesmo objeto como `self.config`e o prefixo da classe (`cls`Esta página lista o que `self` tem

## Ganchos que define

| Membro | Quando corre |
|---|---|
| `self.make` | uma vez, quando o elemento está pronto: construa aqui o DOM |
| `self.setter(value, path, flags)` | sempre que o valor do caminho muda, e quando o componente arranca; `flags` é um objeto |
| `self.destroy` | depois de o elemento ter sido removido (veja a receita do ciclo de vida) |

## Propriedades

| Propriedade | Valor |
|---|---|
| `self.name` | o nome do componente (`probe`) |
| `self.path.path` | o caminho como cadeia (`form.name`) |
| `self.element` | o elemento `<ui-component>` como coleção jQuery |
| `self.dom` | o mesmo elemento como nó do DOM |
| `self.config` | a configuração: os valores por omissão da declaração, depois o atributo `config` do elemento. Contém também as bandeiras de estado: `invalid` desde o início, `modified` e `touched` quando o valor é modificado |
| `self.id` | um id único da instância |
| `self.ready` | `true` depois de `make` |

## O valor

| Método | O que faz |
|---|---|
| `self.get()` | lê o valor do caminho |
| `self.set(value)` | escreve o valor e executa o `setter` de todos os componentes desse caminho, também este |
| `self.update()` | executa de novo o `setter` com o valor atual, sem o alterar |
| `self.rewrite(value)` | escreve o valor **sem** executar o `setter` deste componente (os outros são notificados) |
| `self.modify(value)` | escreve o valor e marca o componente como modificado e tocado: `config.modified` e `config.touched` passam a 1 |
| `self.reset()` | limpa essas bandeiras: `config.modified` e `config.touched` voltam a 0 |
| `self.GET(path)`, `self.SET(path, value)` | leem e escrevem qualquer caminho do estado |
| `self.EXEC(name, a)` | chama a função global `name` |

## O DOM do componente

`self.html(html)`, `self.text(text)`, `self.append(html)` e `self.empty()` alteram o conteúdo. `self.find(selector)` devolve os elementos de dentro como jQuery. `self.css(name, value)` define um estilo, `self.attr(name, value)` um atributo e `self.attrd(name, value)` um atributo `data-` (`self.attrd('x')` lê `data-x`). As classes: `self.aclass(name)` acrescenta, `self.rclass(name)` remove, `self.hclass(name)` diz se a tem e `self.tclass(name, [state])` alterna-a ou define-a como `state`. `self.width()` e `self.height()` devolvem números.

## Eventos, observadores e comandos

| Método | O que faz |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | escuta e envia um evento com nome da página |
| `self.watch(path, fn, [autoinit])` | chama `fn(value, flags, path)` quando esse caminho muda; com `autoinit` também uma vez no início. `+` junta vários caminhos |
| `self.reconfigure('size:9')` | altera a configuração em tempo de execução: `self.config.size` passa a 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | regista um comando desta instância e chama-o |

## Não confie nisto

- **`self.unwatch(path, [fn])` Não é possível remover o guarda-chuva* jComponent 20: compara o caminho parsed do guarda com uma fila, então nada se encaixa. `unwatch`Se você precisar parar um guarda, verifique uma bandeira no interior `fn`.
- **O `CMD(name)` global não chamou um comando registado com `self.command`**: só `self.CMD(name)` o fez.

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