Komponent exempel referens: egenskaper och metoder för själv

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Körd med jComponent 20

En komponent deklareras med COMPONENT(name, defaultConfig, function(self, config, cls) { ... })Förklaringen körs en gång för varje <ui-component name="..."> från sidan och får inställningen (selfoch dess konfiguration (configsamma föremål som self.configoch klassprefixet (clsDen här sidan listar vad self har .

Krokar du definierar

Medlem	När den körs
`self.make`	en gång, när elementet är klart: bygg DOM här
`self.setter(value, path, flags)`	varje gång värdet i sökvägen ändras, och när komponenten startar; `flags` är ett objekt
`self.destroy`	efter att elementet tagits bort (se livscykelreceptet)

Egenskaper

Egenskap	Värde
`self.name`	komponentens namn (`probe`)
`self.path.path`	sökvägen som sträng (`form.name`)
`self.element`	elementet `<ui-component>` som en jQuery-samling
`self.dom`	samma element som en DOM-nod
`self.config`	konfigurationen: deklarationens standardvärden, sedan elementets attribut `config`. Den innehåller också tillståndsflaggorna: `invalid` från början, `modified` och `touched` när värdet ändras
`self.id`	ett unikt id för instansen
`self.ready`	`true` efter `make`

Värdet

Metod	Vad den gör
`self.get()`	läser sökvägens värde
`self.set(value)`	skriver värdet och kör `setter` för varje komponent på den sökvägen, även denna
`self.update()`	kör `setter` igen med det aktuella värdet, utan att ändra det
`self.rewrite(value)`	skriver värdet utan att köra den här komponentens `setter` (de andra meddelas)
`self.modify(value)`	skriver värdet och markerar komponenten som ändrad och berörd: `config.modified` och `config.touched` blir 1
`self.reset()`	rensar de flaggorna: `config.modified` och `config.touched` går tillbaka till 0
`self.GET(path)`, `self.SET(path, value)`	läser och skriver vilken sökväg som helst i tillståndet
`self.EXEC(name, a)`	anropar den globala funktionen `name`

Komponentens DOM

self.html(html), self.text(text), self.append(html) och self.empty() ändrar innehållet. self.find(selector) returnerar elementen inuti som jQuery. self.css(name, value) sätter en stil, self.attr(name, value) ett attribut och self.attrd(name, value) ett data--attribut (self.attrd('x') läser data-x). Klasserna: self.aclass(name) lägger till, self.rclass(name) tar bort, self.hclass(name) talar om om den finns, och self.tclass(name, [state]) växlar den eller sätter den till state. self.width() och self.height() returnerar tal.

Händelser, bevakare och kommandon

Metod	Vad den gör
`self.on(name, fn)` / `self.emit(name, a)`	lyssnar på och skickar en namngiven händelse på sidan
`self.watch(path, fn, [autoinit])`	anropar `fn(value, flags, path)` när den sökvägen ändras; med `autoinit` också en gång i början. `+` sammanfogar flera sökvägar
`self.reconfigure('size:9')`	ändrar konfigurationen under körning: `self.config.size` är 9
`self.command(name, fn)` / `self.CMD(name, a)`	registrerar ett kommando för den här instansen och anropar det

Lita inte på dessa

**self.unwatch(path, [fn]) inte tar bort klockan* jComponent 20: det jämför den parsed väg av vaktaren med en sträng, så ingenting matchar. unwatchOm du behöver stoppa en vaktare, kolla in en flagga fn.
Det globala CMD(name) anropade inte ett kommando registrerat med self.command: bara self.CMD(name) gjorde det.

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>

Prova det i din webbläsare

Redigera exemplet och kör det. Det körs i en isolerad ram i din webbläsare; ingenting skickas till vår server.

Kod

Förhandsvisning