Il riferimento del componente: proprietà e metodi di se stessi

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Eseguita con jComponent 20

Un componente è dichiarato con COMPONENT(name, defaultConfig, function(self, config, cls) { ... })La dichiarazione si svolge una volta per ogni <ui-component name="..."> La pagina è stata pubblicata e viene presentata (selfLa sua configurazione (configLo stesso oggetto come self.confige la classe prefiammata (clsQuesta pagina elenca ciò che self ha

Hook che definisci

Membro	Quando viene eseguito
`self.make`	una volta, quando l'elemento è pronto: costruisci qui il DOM
`self.setter(value, path, flags)`	ogni volta che il valore del percorso cambia, e quando il componente parte; `flags` è un oggetto
`self.destroy`	dopo che l'elemento è stato rimosso (vedi la ricetta del ciclo di vita)

Proprietà

Proprietà	Valore
`self.name`	il nome del componente (`probe`)
`self.path.path`	il percorso come stringa (`form.name`)
`self.element`	l'elemento `<ui-component>` come collezione jQuery
`self.dom`	lo stesso elemento come nodo del DOM
`self.config`	la configurazione: i valori predefiniti della dichiarazione, poi l'attributo `config` dell'elemento. Contiene anche i flag di stato: `invalid` dall'inizio, `modified` e `touched` una volta modificato il valore
`self.id`	un id univoco dell'istanza
`self.ready`	`true` dopo `make`

Il valore

Metodo	Cosa fa
`self.get()`	legge il valore del percorso
`self.set(value)`	scrive il valore ed esegue il `setter` di ogni componente di quel percorso, anche questo
`self.update()`	esegue di nuovo il `setter` con il valore corrente, senza cambiarlo
`self.rewrite(value)`	scrive il valore senza eseguire il `setter` di questo componente (gli altri vengono notificati)
`self.modify(value)`	scrive il valore e segna il componente come modificato e toccato: `config.modified` e `config.touched` diventano 1
`self.reset()`	azzera quei flag: `config.modified` e `config.touched` tornano a 0
`self.GET(path)`, `self.SET(path, value)`	leggono e scrivono qualsiasi percorso dello stato
`self.EXEC(name, a)`	chiama la funzione globale `name`

Il DOM del componente

self.html(html), self.text(text), self.append(html) e self.empty() cambiano il contenuto. self.find(selector) restituisce gli elementi interni come jQuery. self.css(name, value) imposta uno stile, self.attr(name, value) un attributo e self.attrd(name, value) un attributo data- (self.attrd('x') legge data-x). Le classi: self.aclass(name) aggiunge, self.rclass(name) rimuove, self.hclass(name) dice se ce l'ha, e self.tclass(name, [state]) la alterna o la imposta a state. self.width() e self.height() restituiscono numeri.

Eventi, osservatori e comandi

Metodo	Cosa fa
`self.on(name, fn)` / `self.emit(name, a)`	ascolta e invia un evento con nome della pagina
`self.watch(path, fn, [autoinit])`	chiama `fn(value, flags, path)` quando quel percorso cambia; con `autoinit` anche una volta all'inizio. `+` unisce più percorsi
`self.reconfigure('size:9')`	cambia la configurazione a runtime: `self.config.size` è 9
`self.command(name, fn)` / `self.CMD(name, a)`	registra un comando di questa istanza e lo chiama

Non fare affidamento su questi

**self.unwatch(path, [fn]) Non rimuove il monitor* jComponent 20: paragona la strada parsata del guardiano con una corda, quindi nulla si adatta. unwatchSe hai bisogno di fermarti, controlla una bandiera all'interno. fn.
Il CMD(name) globale non ha chiamato un comando registrato con self.command: solo self.CMD(name) l'ha fatto.

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>

Provalo nel tuo browser

Modifica l'esempio ed eseguilo. Gira in un frame isolato del tuo browser; nulla viene inviato al nostro server.

Codice

Anteprima