Składnik odniesienia: właściwości i metody samego siebie

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Uruchomiono z jComponent 20

Część została ogłoszona COMPONENT(name, defaultConfig, function(self, config, cls) { ... })Deklaracja odbywa się raz dla każdego <ui-component name="..."> W tym miejscu i przyjmując wniosek (self• jego konfiguracja (configTen sam obiekt jak self.configa) w klasie przedstawionej (clsTa strona przedstawia, co self Ma się

Haki, które definiujesz

Składnik	Kiedy się uruchamia
`self.make`	raz, gdy element jest gotowy: tutaj zbuduj DOM
`self.setter(value, path, flags)`	za każdym razem, gdy zmienia się wartość ścieżki, i gdy komponent startuje; `flags` to obiekt
`self.destroy`	po usunięciu elementu (zobacz przepis o cyklu życia)

Właściwości

Właściwość	Wartość
`self.name`	nazwa komponentu (`probe`)
`self.path.path`	ścieżka jako ciąg (`form.name`)
`self.element`	element `<ui-component>` jako kolekcja jQuery
`self.dom`	ten sam element jako węzeł DOM
`self.config`	konfiguracja: wartości domyślne deklaracji, potem atrybut `config` elementu. Zawiera też flagi stanu: `invalid` od początku, `modified` i `touched`, gdy wartość zostanie zmodyfikowana
`self.id`	unikalne id instancji
`self.ready`	`true` po `make`

Wartość

Metoda	Co robi
`self.get()`	czyta wartość ścieżki
`self.set(value)`	zapisuje wartość i uruchamia `setter` każdego komponentu tej ścieżki, także tego
`self.update()`	uruchamia `setter` ponownie z bieżącą wartością, bez jej zmiany
`self.rewrite(value)`	zapisuje wartość bez uruchamiania `setter` tego komponentu (pozostałe są powiadamiane)
`self.modify(value)`	zapisuje wartość i oznacza komponent jako zmodyfikowany i dotknięty: `config.modified` i `config.touched` stają się 1
`self.reset()`	czyści te flagi: `config.modified` i `config.touched` wracają do 0
`self.GET(path)`, `self.SET(path, value)`	czytają i zapisują dowolną ścieżkę stanu
`self.EXEC(name, a)`	wywołuje funkcję globalną `name`

DOM komponentu

self.html(html), self.text(text), self.append(html) i self.empty() zmieniają zawartość. self.find(selector) zwraca elementy wewnątrz jako jQuery. self.css(name, value) ustawia styl, self.attr(name, value) atrybut, a self.attrd(name, value) atrybut data- (self.attrd('x') czyta data-x). Klasy: self.aclass(name) dodaje, self.rclass(name) usuwa, self.hclass(name) mówi, czy ją ma, a self.tclass(name, [state]) przełącza ją lub ustawia na state. self.width() i self.height() zwracają liczby.

Zdarzenia, obserwatorzy i polecenia

Metoda	Co robi
`self.on(name, fn)` / `self.emit(name, a)`	nasłuchuje i wysyła nazwane zdarzenie strony
`self.watch(path, fn, [autoinit])`	wywołuje `fn(value, flags, path)`, gdy ta ścieżka się zmienia; z `autoinit` także raz na początku. `+` łączy kilka ścieżek
`self.reconfigure('size:9')`	zmienia konfigurację w czasie działania: `self.config.size` to 9
`self.command(name, fn)` / `self.CMD(name, a)`	rejestruje polecenie tej instancji i je wywołuje

Nie polegaj na tych

**self.unwatch(path, [fn]) Nie wyciąga się zegarka* jComponent 20: porównuje parsed ścieżkę strażnika z pasem, więc nic się nie zgadza. unwatchJeśli chcesz zatrzymać strażnika, sprawdź flagę wewnątrz fn.
Globalne CMD(name) nie wywołało polecenia zarejestrowanego przez self.command: zrobiło to tylko self.CMD(name).

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>

Wypróbuj w przeglądarce

Edytuj przykład i uruchom go. Działa w izolowanej ramce w Twojej przeglądarce; nic nie jest wysyłane na nasz serwer.

Kod

Podgląd