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

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Изпълнено с jComponent 20

Съставът е деклариран с 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) го направи.

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>

Опитайте в браузъра си

Редактирайте примера и го изпълнете. Работи в изолирана рамка във вашия браузър; нищо не се изпраща към нашия сървър.

Код

Преглед