# Komponent exempel referens: egenskaper och metoder för själv

> Deklarationen av en jComponent 20 komponent och vad dess instans (själv) erbjuder: egenskaper, värdemetoder, DOM assistenter, händelser, observatörer och kommandon.

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

En komponent deklareras med `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Förklaringen körs en gång för varje `<ui-component name="...">` från sidan och får inställningen (`self`och dess konfiguration (`config`samma föremål som `self.config`och klassprefixet (`cls`Den här sidan listar vad `self` har .

## Krokar du definierar

| Medlem | När den körs |
|---|---|
| `self.make` | en gång, när elementet är klart: bygg DOM här |
| `self.setter(value, path, flags)` | varje gång värdet i sökvägen ändras, och när komponenten startar; `flags` är ett objekt |
| `self.destroy` | efter att elementet tagits bort (se livscykelreceptet) |

## Egenskaper

| Egenskap | Värde |
|---|---|
| `self.name` | komponentens namn (`probe`) |
| `self.path.path` | sökvägen som sträng (`form.name`) |
| `self.element` | elementet `<ui-component>` som en jQuery-samling |
| `self.dom` | samma element som en DOM-nod |
| `self.config` | konfigurationen: deklarationens standardvärden, sedan elementets attribut `config`. Den innehåller också tillståndsflaggorna: `invalid` från början, `modified` och `touched` när värdet ändras |
| `self.id` | ett unikt id för instansen |
| `self.ready` | `true` efter `make` |

## Värdet

| Metod | Vad den gör |
|---|---|
| `self.get()` | läser sökvägens värde |
| `self.set(value)` | skriver värdet och kör `setter` för varje komponent på den sökvägen, även denna |
| `self.update()` | kör `setter` igen med det aktuella värdet, utan att ändra det |
| `self.rewrite(value)` | skriver värdet **utan** att köra den här komponentens `setter` (de andra meddelas) |
| `self.modify(value)` | skriver värdet och markerar komponenten som ändrad och berörd: `config.modified` och `config.touched` blir 1 |
| `self.reset()` | rensar de flaggorna: `config.modified` och `config.touched` går tillbaka till 0 |
| `self.GET(path)`, `self.SET(path, value)` | läser och skriver vilken sökväg som helst i tillståndet |
| `self.EXEC(name, a)` | anropar den globala funktionen `name` |

## Komponentens DOM

`self.html(html)`, `self.text(text)`, `self.append(html)` och `self.empty()` ändrar innehållet. `self.find(selector)` returnerar elementen inuti som jQuery. `self.css(name, value)` sätter en stil, `self.attr(name, value)` ett attribut och `self.attrd(name, value)` ett `data-`-attribut (`self.attrd('x')` läser `data-x`). Klasserna: `self.aclass(name)` lägger till, `self.rclass(name)` tar bort, `self.hclass(name)` talar om om den finns, och `self.tclass(name, [state])` växlar den eller sätter den till `state`. `self.width()` och `self.height()` returnerar tal.

## Händelser, bevakare och kommandon

| Metod | Vad den gör |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | lyssnar på och skickar en namngiven händelse på sidan |
| `self.watch(path, fn, [autoinit])` | anropar `fn(value, flags, path)` när den sökvägen ändras; med `autoinit` också en gång i början. `+` sammanfogar flera sökvägar |
| `self.reconfigure('size:9')` | ändrar konfigurationen under körning: `self.config.size` är 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | registrerar ett kommando för den här instansen och anropar det |

## Lita inte på dessa

- **`self.unwatch(path, [fn])` inte tar bort klockan* jComponent 20: det jämför den parsed väg av vaktaren med en sträng, så ingenting matchar. `unwatch`Om du behöver stoppa en vaktare, kolla in en flagga `fn`.
- **Det globala `CMD(name)` anropade inte ett kommando registrerat med `self.command`**: bara `self.CMD(name)` gjorde det.

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