Component instantie verwijzing: eigenschappen en methoden van zichzelf

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Uitgevoerd met jComponent 20

Een component wordt aangegeven met COMPONENT(name, defaultConfig, function(self, config, cls) { ... })De verklaring loopt één keer voor elke <ui-component name="..."> van de pagina en ontvangt de instelling (selfDe configuratie (configHetzelfde object als self.configen de voorwaarden van de klasse (clsDeze pagina bevat wat self heeft

Hooks die je definieert

Lid	Wanneer het draait
`self.make`	eenmaal, wanneer het element klaar is: bouw hier de DOM op
`self.setter(value, path, flags)`	telkens wanneer de waarde van het pad verandert, en wanneer het component start; `flags` is een object
`self.destroy`	nadat het element is verwijderd (zie het levenscyclusrecept)

Eigenschappen

Eigenschap	Waarde
`self.name`	de naam van het component (`probe`)
`self.path.path`	het pad als string (`form.name`)
`self.element`	het element `<ui-component>` als jQuery-collectie
`self.dom`	hetzelfde element als DOM-knoop
`self.config`	de configuratie: de standaardwaarden van de declaratie, daarna het attribuut `config` van het element. Ze bevat ook de statusvlaggen: `invalid` vanaf het begin, `modified` en `touched` zodra de waarde wordt gewijzigd
`self.id`	een unieke id van de instantie
`self.ready`	`true` na `make`

De waarde

Methode	Wat het doet
`self.get()`	leest de waarde van het pad
`self.set(value)`	schrijft de waarde en voert de `setter` uit van elk component van dat pad, ook dit
`self.update()`	voert de `setter` opnieuw uit met de huidige waarde, zonder haar te wijzigen
`self.rewrite(value)`	schrijft de waarde zonder de `setter` van dit component uit te voeren (de andere worden gemeld)
`self.modify(value)`	schrijft de waarde en markeert het component als gewijzigd en aangeraakt: `config.modified` en `config.touched` worden 1
`self.reset()`	wist die vlaggen: `config.modified` en `config.touched` gaan terug naar 0
`self.GET(path)`, `self.SET(path, value)`	lezen en schrijven elk pad van de status
`self.EXEC(name, a)`	roept de globale functie `name` aan

De DOM van het component

self.html(html), self.text(text), self.append(html) en self.empty() wijzigen de inhoud. self.find(selector) geeft de elementen erin terug als jQuery. self.css(name, value) zet een stijl, self.attr(name, value) een attribuut en self.attrd(name, value) een data--attribuut (self.attrd('x') leest data-x). De klassen: self.aclass(name) voegt toe, self.rclass(name) verwijdert, self.hclass(name) zegt of het hem heeft, en self.tclass(name, [state]) schakelt hem om of zet hem op state. self.width() en self.height() geven getallen terug.

Gebeurtenissen, watchers en commando's

Methode	Wat het doet
`self.on(name, fn)` / `self.emit(name, a)`	luistert naar en verstuurt een benoemde gebeurtenis van de pagina
`self.watch(path, fn, [autoinit])`	roept `fn(value, flags, path)` aan wanneer dat pad verandert; met `autoinit` ook eenmaal aan het begin. `+` voegt meerdere paden samen
`self.reconfigure('size:9')`	wijzigt de configuratie tijdens runtime: `self.config.size` is 9
`self.command(name, fn)` / `self.CMD(name, a)`	registreert een commando van deze instantie en roept het aan

Reken hier niet op

**self.unwatch(path, [fn]) niet verwijderen van de wacht* in jComponent 20: het vergelijkt de parsede weg van de wachter met een straling, dus niets komt overeen. unwatchAls je een wachtman moet stoppen, controleer dan een vlag in. fn.
Het globale CMD(name) riep een met self.command geregistreerd commando niet aan: alleen self.CMD(name) deed dat.

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>

Probeer het in je browser

Bewerk het voorbeeld en voer het uit. Het draait in een geïsoleerd frame in je browser; er wordt niets naar onze server gestuurd.

Code

Voorbeeld