Az összetevő példája: tulajdonságok és módszerek önmaguk

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Futtatva a jComponent 20-szal

Az összetevőket a COMPONENT(name, defaultConfig, function(self, config, cls) { ... })A nyilatkozat egyszer minden egyes <ui-component name="..."> Az oldalról és az ügyfelekről (selfA konfiguráció (configUgyanaz a tárgy, mint self.configAz osztály előírása (clsEz az oldal felsorolja, hogy mi self Van egy

A te általad definiált hookok

Tag	Mikor fut
`self.make`	egyszer, amikor az elem kész: itt építsd fel a DOM-ot
`self.setter(value, path, flags)`	minden alkalommal, amikor az útvonal értéke változik, és amikor a komponens elindul; a `flags` egy objektum
`self.destroy`	az elem eltávolítása után (lásd az életciklus receptet)

Tulajdonságok

Tulajdonság	Érték
`self.name`	a komponens neve (`probe`)
`self.path.path`	az útvonal sztringként (`form.name`)
`self.element`	a `<ui-component>` elem jQuery gyűjteményként
`self.dom`	ugyanaz az elem DOM-csomópontként
`self.config`	a konfiguráció: a deklaráció alapértékei, majd az elem `config` attribútuma. Az állapotjelzőket is tartalmazza: `invalid` a kezdettől, `modified` és `touched`, amint az érték módosul
`self.id`	a példány egyedi azonosítója
`self.ready`	`true` a `make` után

Az érték

Metódus	Mit csinál
`self.get()`	beolvassa az útvonal értékét
`self.set(value)`	kiírja az értéket, és lefuttatja az útvonal minden komponensének `setter` függvényét, ezét is
`self.update()`	újra lefuttatja a `setter` függvényt a jelenlegi értékkel, az érték megváltoztatása nélkül
`self.rewrite(value)`	kiírja az értéket úgy, hogy nem futtatja ennek a komponensnek a `setter` függvényét (a többit értesíti)
`self.modify(value)`	kiírja az értéket, és módosítottnak és megérintettnek jelöli a komponenst: a `config.modified` és a `config.touched` 1 lesz
`self.reset()`	törli ezeket a jelzőket: a `config.modified` és a `config.touched` visszamegy 0-ra
`self.GET(path)`, `self.SET(path, value)`	az állapot bármely útvonalát olvassák és írják
`self.EXEC(name, a)`	meghívja a `name` globális függvényt

A komponens DOM-ja

A self.html(html), self.text(text), self.append(html) és self.empty() a tartalmat változtatják. A self.find(selector) jQuery-ként adja vissza a benne lévő elemeket. A self.css(name, value) stílust állít, a self.attr(name, value) attribútumot, a self.attrd(name, value) pedig data- attribútumot (a self.attrd('x') a data-x értékét olvassa). Az osztályok: a self.aclass(name) hozzáad, a self.rclass(name) eltávolít, a self.hclass(name) megmondja, hogy megvan-e, a self.tclass(name, [state]) pedig átkapcsolja vagy state értékre állítja. A self.width() és a self.height() számokat ad vissza.

Események, megfigyelők és parancsok

Metódus	Mit csinál
`self.on(name, fn)` / `self.emit(name, a)`	figyel és küld egy az oldalon elnevezett eseményt
`self.watch(path, fn, [autoinit])`	meghívja az `fn(value, flags, path)` függvényt, amikor az útvonal változik; `autoinit` esetén egyszer az elején is. A `+` több útvonalat fűz össze
`self.reconfigure('size:9')`	futásidőben megváltoztatja a konfigurációt: a `self.config.size` értéke 9
`self.command(name, fn)` / `self.CMD(name, a)`	regisztrál egy parancsot ehhez a példányhoz, és meghívja

Ne támaszkodj ezekre

self.unwatch(path, [fn]) nem távolítja el a szemetet a jComponent 20: összehasonlítja a szemét parsized útját egy sorral, így semmi nem felel meg. A szemét továbbra is fut unwatch. Ha meg kell állítania a szemet, ellenőrizze a zászlót a fn-ban.
A globális CMD(name) nem hívta meg a self.command hívással regisztrált parancsot: csak a self.CMD(name) tette.

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>

Próbáld ki a böngésződben

Szerkeszd a példát, és futtasd. A böngésződ egy izolált keretében fut; semmi nem kerül a szerverünkre.

Kód

Előnézet