Referință de exemplu: proprietăți și metode de sine

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Executată cu jComponent 20

Un element este declarat cu COMPONENT(name, defaultConfig, function(self, config, cls) { ... })Declaraţia se desfăşoară o dată pentru fiecare <ui-component name="..."> de pe pagina de referință și primesc instanța (selfConfigurarea acestuia (configAcelaşi obiect ca şi self.configÎn cazul în care prefixul de clasă (clsAceastă pagină prezintă ceea ce self are .

Hook-uri pe care le definești

Membru	Când rulează
`self.make`	o dată, când elementul este gata: construiește aici DOM-ul
`self.setter(value, path, flags)`	de fiecare dată când se schimbă valoarea căii și când pornește componenta; `flags` este un obiect
`self.destroy`	după ce elementul a fost eliminat (vezi rețeta ciclului de viață)

Proprietăți

Proprietate	Valoare
`self.name`	numele componentei (`probe`)
`self.path.path`	calea ca șir (`form.name`)
`self.element`	elementul `<ui-component>` ca o colecție jQuery
`self.dom`	același element ca nod DOM
`self.config`	configurația: valorile implicite ale declarației, apoi atributul `config` al elementului. Conține și flagurile de stare: `invalid` de la început, `modified` și `touched` odată ce valoarea este modificată
`self.id`	un id unic al instanței
`self.ready`	`true` după `make`

Valoarea

Metodă	Ce face
`self.get()`	citește valoarea căii
`self.set(value)`	scrie valoarea și rulează `setter`-ul fiecărei componente a acelei căi, și pe acesta
`self.update()`	rulează din nou `setter`-ul cu valoarea curentă, fără a o schimba
`self.rewrite(value)`	scrie valoarea fără a rula `setter`-ul acestei componente (celelalte sunt notificate)
`self.modify(value)`	scrie valoarea și marchează componenta ca modificată și atinsă: `config.modified` și `config.touched` devin 1
`self.reset()`	șterge acele flaguri: `config.modified` și `config.touched` revin la 0
`self.GET(path)`, `self.SET(path, value)`	citesc și scriu orice cale a stării
`self.EXEC(name, a)`	apelează funcția globală `name`

DOM-ul componentei

self.html(html), self.text(text), self.append(html) și self.empty() schimbă conținutul. self.find(selector) returnează elementele dinăuntru ca jQuery. self.css(name, value) setează un stil, self.attr(name, value) un atribut și self.attrd(name, value) un atribut data- (self.attrd('x') citește data-x). Clasele: self.aclass(name) adaugă, self.rclass(name) elimină, self.hclass(name) spune dacă o are, iar self.tclass(name, [state]) o comută sau o setează la state. self.width() și self.height() returnează numere.

Evenimente, observatori și comenzi

Metodă	Ce face
`self.on(name, fn)` / `self.emit(name, a)`	ascultă și trimite un eveniment cu nume al paginii
`self.watch(path, fn, [autoinit])`	apelează `fn(value, flags, path)` când acea cale se schimbă; cu `autoinit` și o dată la început. `+` unește mai multe căi
`self.reconfigure('size:9')`	schimbă configurația în timpul execuției: `self.config.size` este 9
`self.command(name, fn)` / `self.CMD(name, a)`	înregistrează o comandă a acestei instanțe și o apelează

Nu te baza pe acestea

**self.unwatch(path, [fn]) Nu se îndepărtează de ceară* jComponent 20: compară calea parsată a păzitorului cu o linie, astfel încât nimic nu se potrivește. unwatchDacă aveți nevoie să opriți un gardian, verificați o steagă în interior fn.
CMD(name) global nu a apelat o comandă înregistrată cu self.command: doar self.CMD(name) a făcut-o.

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>

Încearcă în browserul tău

Editează exemplul și rulează-l. Rulează într-un cadru izolat din browserul tău; nimic nu este trimis către serverul nostru.

Cod

Previzualizare