Složení reference: vlastnosti a metody sebe

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Spuštěno s jComponent 20

Součástí je prohlášení COMPONENT(name, defaultConfig, function(self, config, cls) { ... })Prohlášení probíhá jednou za každou <ui-component name="..."> Zobrazit na stránce a získat (selfa její konfigurace (configStejný objekt jako self.configa předpověď třídy (clsTato stránka uvádí, co self A má.

Háčky, které definujete

Člen	Kdy se spustí
`self.make`	jednou, když je element připraven: tady sestavte DOM
`self.setter(value, path, flags)`	pokaždé, když se hodnota cesty změní, a když komponenta startuje; `flags` je objekt
`self.destroy`	po odstranění elementu (viz recept o životním cyklu)

Vlastnosti

Vlastnost	Hodnota
`self.name`	název komponenty (`probe`)
`self.path.path`	cesta jako řetězec (`form.name`)
`self.element`	element `<ui-component>` jako kolekce jQuery
`self.dom`	tentýž element jako uzel DOM
`self.config`	konfigurace: výchozí hodnoty deklarace, poté atribut `config` elementu. Obsahuje i příznaky stavu: `invalid` od začátku, `modified` a `touched`, když se hodnota změní
`self.id`	jedinečné id instance
`self.ready`	`true` po `make`

Hodnota

Metoda	Co dělá
`self.get()`	čte hodnotu cesty
`self.set(value)`	zapíše hodnotu a spustí `setter` každé komponenty té cesty, i této
`self.update()`	znovu spustí `setter` s aktuální hodnotou, bez její změny
`self.rewrite(value)`	zapíše hodnotu bez spuštění `setter` této komponenty (ostatní se upozorní)
`self.modify(value)`	zapíše hodnotu a označí komponentu jako změněnou a dotčenou: `config.modified` a `config.touched` se stanou 1
`self.reset()`	vymaže tyto příznaky: `config.modified` a `config.touched` se vrátí na 0
`self.GET(path)`, `self.SET(path, value)`	čtou a zapisují libovolnou cestu stavu
`self.EXEC(name, a)`	zavolá globální funkci `name`

DOM komponenty

self.html(html), self.text(text), self.append(html) a self.empty() mění obsah. self.find(selector) vrátí elementy uvnitř jako jQuery. self.css(name, value) nastaví styl, self.attr(name, value) atribut a self.attrd(name, value) atribut data- (self.attrd('x') čte data-x). Třídy: self.aclass(name) přidá, self.rclass(name) odstraní, self.hclass(name) řekne, zda ji má, a self.tclass(name, [state]) ji přepne nebo nastaví na state. self.width() a self.height() vracejí čísla.

Události, sledovače a příkazy

Metoda	Co dělá
`self.on(name, fn)` / `self.emit(name, a)`	poslouchá a posílá pojmenovanou událost stránky
`self.watch(path, fn, [autoinit])`	zavolá `fn(value, flags, path)`, když se ta cesta změní; s `autoinit` i jednou na začátku. `+` spojuje více cest
`self.reconfigure('size:9')`	změní konfiguraci za běhu: `self.config.size` je 9
`self.command(name, fn)` / `self.CMD(name, a)`	zaregistruje příkaz této instance a zavolá jej

Nespoléhejte na tyto

**self.unwatch(path, [fn]) Neodstraní se zpravodajská služba* jComponent 20: porovnává parsed cestu strážce s řetězcem, takže nic nesouhlasí. unwatchPokud potřebujete zastavit stráž, zkontrolujte vlajku uvnitř fn.
Globální CMD(name) nezavolal příkaz registrovaný přes self.command: zavolal jej pouze 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>

Vyzkoušejte to ve svém prohlížeči

Upravte příklad a spusťte ho. Běží v izolovaném rámu ve vašem prohlížeči; na náš server se nic neposílá.

Kód

Náhled