Odkaz na inštanciu komponentu: vlastnosti a metódy seba

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Spustené s jComponent 20

Súčasťou je vyhlásenie COMPONENT(name, defaultConfig, function(self, config, cls) { ... })Vyhlásenie prebieha raz za každú <ui-component name="..."> na stránke a prijímajú príkaz (selfa jeho konfigurácia (configrovnaký objekt ako self.configa predpísané triedy (clsTáto stránka uvádza, čo self Má sa.

Háčiky, ktoré definujete

Člen	Kedy sa spustí
`self.make`	raz, keď je element pripravený: tu zostavte DOM
`self.setter(value, path, flags)`	zakaždým, keď sa hodnota cesty zmení, a keď komponent štartuje; `flags` je objekt
`self.destroy`	po odstránení elementu (pozri recept o životnom cykle)

Vlastnosti

Vlastnosť	Hodnota
`self.name`	názov komponentu (`probe`)
`self.path.path`	cesta ako reťazec (`form.name`)
`self.element`	element `<ui-component>` ako kolekcia jQuery
`self.dom`	ten istý element ako uzol DOM
`self.config`	konfigurácia: predvolené hodnoty deklarácie, potom atribút `config` elementu. Obsahuje aj príznaky stavu: `invalid` od začiatku, `modified` a `touched`, keď sa hodnota zmení
`self.id`	jedinečné id inštancie
`self.ready`	`true` po `make`

Hodnota

Metóda	Čo robí
`self.get()`	číta hodnotu cesty
`self.set(value)`	zapíše hodnotu a spustí `setter` každého komponentu tejto cesty, aj tohto
`self.update()`	znova spustí `setter` s aktuálnou hodnotou, bez jej zmeny
`self.rewrite(value)`	zapíše hodnotu bez spustenia `setter` tohto komponentu (ostatné sa upozornia)
`self.modify(value)`	zapíše hodnotu a označí komponent ako zmenený a dotknutý: `config.modified` a `config.touched` sa stanú 1
`self.reset()`	vymaže tieto príznaky: `config.modified` a `config.touched` sa vrátia na 0
`self.GET(path)`, `self.SET(path, value)`	čítajú a zapisujú ľubovoľnú cestu stavu
`self.EXEC(name, a)`	zavolá globálnu funkciu `name`

DOM komponentu

self.html(html), self.text(text), self.append(html) a self.empty() menia obsah. self.find(selector) vráti elementy vnútri ako jQuery. self.css(name, value) nastaví štýl, self.attr(name, value) atribút a self.attrd(name, value) atribút data- (self.attrd('x') číta data-x). Triedy: self.aclass(name) pridá, self.rclass(name) odstráni, self.hclass(name) povie, či ju má, a self.tclass(name, [state]) ju prepne alebo nastaví na state. self.width() a self.height() vracajú čísla.

Udalosti, sledovače a príkazy

Metóda	Čo robí
`self.on(name, fn)` / `self.emit(name, a)`	počúva a posiela pomenovanú udalosť stránky
`self.watch(path, fn, [autoinit])`	zavolá `fn(value, flags, path)`, keď sa tá cesta zmení; s `autoinit` aj raz na začiatku. `+` spája viac ciest
`self.reconfigure('size:9')`	zmení konfiguráciu za behu: `self.config.size` je 9
`self.command(name, fn)` / `self.CMD(name, a)`	zaregistruje príkaz tejto inštancie a zavolá ho

Nespoliehajte sa na tieto

**self.unwatch(path, [fn]) Neodstrániť stráž * jComponent 20: porovnáva parsed cestu striekača s pruhom, takže nič sa nezhoduje. unwatchAk potrebujete zastaviť strážcu, skontrolujte vlajku vo vnútri fn.
Globálny CMD(name) nezavolal príkaz registrovaný cez self.command: zavolal ho iba 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>

Vyskúšajte to vo svojom prehliadači

Upravte príklad a spustite ho. Beží v izolovanom ráme vo vašom prehliadači; na náš server sa nič neposiela.

Kód

Náhľad