# Компонентна референция: свойства и методи на себе си

> Декларацията на компонента jComponent 20 и това, което неговата инстанция (само) предлага: свойства, методи за стойност, помощници на DOM, събития, наблюдатели и команди.

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

Съставът е деклариран с `COMPONENT(name, defaultConfig, function(self, config, cls) { ... })`Декларацията се изпълнява веднъж за всеки `<ui-component name="...">` На страницата и получава инстанцията (`self`Създаване на конфигурация (`config`Същият обект като `self.config`и префиксът на класа (`cls`Тази страница показва какво `self` Имам

## Куки, които дефинирате

| Член | Кога се изпълнява |
|---|---|
| `self.make` | веднъж, когато елементът е готов: изградете тук DOM |
| `self.setter(value, path, flags)` | всеки път, когато стойността на пътя се променя, и когато компонентът стартира; `flags` е обект |
| `self.destroy` | след като елементът е премахнат (вижте рецептата за жизнения цикъл) |

## Свойства

| Свойство | Стойност |
|---|---|
| `self.name` | името на компонента (`probe`) |
| `self.path.path` | пътят като низ (`form.name`) |
| `self.element` | елементът `<ui-component>` като jQuery колекция |
| `self.dom` | същият елемент като DOM възел |
| `self.config` | конфигурацията: стойностите по подразбиране от декларацията, после атрибутът `config` на елемента. Съдържа и флаговете на състоянието: `invalid` от самото начало, `modified` и `touched`, щом стойността се промени |
| `self.id` | уникално id на инстанцията |
| `self.ready` | `true` след `make` |

## Стойността

| Метод | Какво прави |
|---|---|
| `self.get()` | чете стойността на пътя |
| `self.set(value)` | записва стойността и изпълнява `setter` на всеки компонент на този път, включително този |
| `self.update()` | изпълнява отново `setter` с текущата стойност, без да я променя |
| `self.rewrite(value)` | записва стойността **без** да изпълнява `setter` на този компонент (останалите се уведомяват) |
| `self.modify(value)` | записва стойността и маркира компонента като променен и докоснат: `config.modified` и `config.touched` стават 1 |
| `self.reset()` | изчиства тези флагове: `config.modified` и `config.touched` се връщат на 0 |
| `self.GET(path)`, `self.SET(path, value)` | четат и записват всеки път на състоянието |
| `self.EXEC(name, a)` | извиква глобалната функция `name` |

## DOM на компонента

`self.html(html)`, `self.text(text)`, `self.append(html)` и `self.empty()` променят съдържанието. `self.find(selector)` връща елементите вътре като jQuery. `self.css(name, value)` задава стил, `self.attr(name, value)` атрибут, а `self.attrd(name, value)` `data-` атрибут (`self.attrd('x')` чете `data-x`). Класовете: `self.aclass(name)` добавя, `self.rclass(name)` премахва, `self.hclass(name)` казва дали го има, а `self.tclass(name, [state])` го превключва или го задава на `state`. `self.width()` и `self.height()` връщат числа.

## Събития, наблюдатели и команди

| Метод | Какво прави |
|---|---|
| `self.on(name, fn)` / `self.emit(name, a)` | слуша и изпраща именувано събитие на страницата |
| `self.watch(path, fn, [autoinit])` | извиква `fn(value, flags, path)`, когато този път се промени; с `autoinit` и веднъж в началото. `+` свързва няколко пътя |
| `self.reconfigure('size:9')` | променя конфигурацията по време на изпълнение: `self.config.size` е 9 |
| `self.command(name, fn)` / `self.CMD(name, a)` | регистрира команда на тази инстанция и я извиква |

## Не разчитайте на тези

- **`self.unwatch(path, [fn])` Не премахва часовника* jComponent 20: той сравнява парседния път на патрона с лента, така че нищо не се състои. `unwatch`Ако трябва да спрете чатката, проверете знамето вътре. `fn`.
- **Глобалното `CMD(name)` не извика команда, регистрирана със `self.command`**: само `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>
```