# Referencia de instancia de componente: propiedades y métodos de self

> La declaración de un componente jComponent 20 y lo que su instancia (se) ofrece: propiedades, métodos de valor, ayudantes DOM, eventos, observadores y comandos.

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

Un componente está declarado con `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`La declaración se realiza una vez por cada `<ui-component name="...">` de la página y recibe el caso (`self`La configuración (`config`El mismo objeto que `self.config`y el prefixo de la clase (`cls`Esta página muestra lo que `self` tiene.

## Ganchos que defines

| Miembro | Cuándo se ejecuta |
|---|---|
| `self.make` | una vez, cuando el elemento está listo: construye aquí el DOM |
| `self.setter(value, path, flags)` | cada vez que cambia el valor de la ruta, y cuando el componente arranca; `flags` es un objeto |
| `self.destroy` | después de que el elemento se haya eliminado (consulta la receta del ciclo de vida) |

## Propiedades

| Propiedad | Valor |
|---|---|
| `self.name` | el nombre del componente (`probe`) |
| `self.path.path` | la ruta como cadena (`form.name`) |
| `self.element` | el elemento `<ui-component>` como colección jQuery |
| `self.dom` | el mismo elemento como nodo del DOM |
| `self.config` | la configuración: los valores por defecto de la declaración, y después el atributo `config` del elemento. También contiene las banderas de estado: `invalid` desde el principio, `modified` y `touched` cuando el valor se modifica |
| `self.id` | un id único de la instancia |
| `self.ready` | `true` después de `make` |

## El valor

| Método | Qué hace |
|---|---|
| `self.get()` | lee el valor de la ruta |
| `self.set(value)` | escribe el valor y ejecuta el `setter` de todos los componentes de esa ruta, también este |
| `self.update()` | ejecuta de nuevo el `setter` con el valor actual, sin cambiarlo |
| `self.rewrite(value)` | escribe el valor **sin** ejecutar el `setter` de este componente (a los demás se les notifica) |
| `self.modify(value)` | escribe el valor y marca el componente como modificado y tocado: `config.modified` y `config.touched` pasan a 1 |
| `self.reset()` | borra esas banderas: `config.modified` y `config.touched` vuelven a 0 |
| `self.GET(path)`, `self.SET(path, value)` | leen y escriben cualquier ruta del estado |
| `self.EXEC(name, a)` | llama a la función global `name` |

## El DOM del componente

`self.html(html)`, `self.text(text)`, `self.append(html)` y `self.empty()` cambian el contenido. `self.find(selector)` devuelve los elementos de dentro como jQuery. `self.css(name, value)` establece un estilo, `self.attr(name, value)` un atributo y `self.attrd(name, value)` un atributo `data-` (`self.attrd('x')` lee `data-x`). Las clases: `self.aclass(name)` añade, `self.rclass(name)` quita, `self.hclass(name)` dice si la tiene y `self.tclass(name, [state])` la alterna o la fija en `state`. `self.width()` y `self.height()` devuelven números.

## Eventos, observadores y comandos

| Método | Qué hace |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | escucha y envía un evento con nombre de la página |
| `self.watch(path, fn, [autoinit])` | llama a `fn(value, flags, path)` cuando esa ruta cambia; con `autoinit` también una vez al principio. `+` une varias rutas |
| `self.reconfigure('size:9')` | cambia la configuración en tiempo de ejecución: `self.config.size` pasa a 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | registra un comando de esta instancia y lo llama |

## No te fíes de esto

- **`self.unwatch(path, [fn])` No se puede retirar el agujero* jComponent 20: compara el camino parsado del guardián con una línea, por lo que nada se ajusta. `unwatch`Si necesitas detener una guardia, comproba una bandera dentro `fn`.
- **El `CMD(name)` global no llamó a un comando registrado con `self.command`**: solo lo hizo `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>
```