Komponenteninstanzreferenz: Eigenschaften und Methoden von self

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsreference Mit jComponent 20 ausgeführt

Eine Komponente wird mit COMPONENT(name, defaultConfig, function(self, config, cls) { ... })Die Erklärung läuft einmal für jeden <ui-component name="..."> Auf der Seite und empfängt die Instanz (selfIhre Konfiguration (configDas gleiche Objekt wie self.configund die Klasse (clsDiese Seite zeigt, was self hat es.

Hooks, die du definierst

Mitglied	Wann es läuft
`self.make`	einmal, wenn das Element bereit ist: baue hier das DOM auf
`self.setter(value, path, flags)`	jedes Mal, wenn sich der Wert des Pfads ändert, und wenn die Komponente startet; `flags` ist ein Objekt
`self.destroy`	nachdem das Element entfernt wurde (siehe das Lebenszyklus-Rezept)

Eigenschaften

Eigenschaft	Wert
`self.name`	der Name der Komponente (`probe`)
`self.path.path`	der Pfad als String (`form.name`)
`self.element`	das Element `<ui-component>` als jQuery-Sammlung
`self.dom`	dasselbe Element als DOM-Knoten
`self.config`	die Konfiguration: die Standardwerte der Deklaration, dann das Attribut `config` des Elements. Sie enthält auch die Zustands-Flags: `invalid` von Anfang an, `modified` und `touched`, sobald der Wert geändert wird
`self.id`	eine eindeutige ID der Instanz
`self.ready`	`true` nach `make`

Der Wert

Methode	Was sie tut
`self.get()`	liest den Wert des Pfads
`self.set(value)`	schreibt den Wert und führt den `setter` jeder Komponente dieses Pfads aus, auch dieser
`self.update()`	führt den `setter` erneut mit dem aktuellen Wert aus, ohne ihn zu ändern
`self.rewrite(value)`	schreibt den Wert ohne den `setter` dieser Komponente auszuführen (die anderen werden benachrichtigt)
`self.modify(value)`	schreibt den Wert und markiert die Komponente als geändert und berührt: `config.modified` und `config.touched` werden zu 1
`self.reset()`	löscht diese Flags: `config.modified` und `config.touched` gehen zurück auf 0
`self.GET(path)`, `self.SET(path, value)`	lesen und schreiben jeden Pfad des Zustands
`self.EXEC(name, a)`	ruft die globale Funktion `name` auf

Das DOM der Komponente

self.html(html), self.text(text), self.append(html) und self.empty() ändern den Inhalt. self.find(selector) gibt die darin liegenden Elemente als jQuery zurück. self.css(name, value) setzt einen Style, self.attr(name, value) ein Attribut und self.attrd(name, value) ein data--Attribut (self.attrd('x') liest data-x). Die Klassen: self.aclass(name) fügt hinzu, self.rclass(name) entfernt, self.hclass(name) sagt, ob sie vorhanden ist, und self.tclass(name, [state]) schaltet sie um oder setzt sie auf state. self.width() und self.height() geben Zahlen zurück.

Ereignisse, Beobachter und Befehle

Methode	Was sie tut
`self.on(name, fn)` / `self.emit(name, a)`	hört auf ein benanntes Ereignis der Seite und sendet es
`self.watch(path, fn, [autoinit])`	ruft `fn(value, flags, path)` auf, wenn sich dieser Pfad ändert; mit `autoinit` auch einmal zu Beginn. `+` verbindet mehrere Pfade
`self.reconfigure('size:9')`	ändert die Konfiguration zur Laufzeit: `self.config.size` ist 9
`self.command(name, fn)` / `self.CMD(name, a)`	registriert einen Befehl dieser Instanz und ruft ihn auf

Verlasse dich nicht darauf

**self.unwatch(path, [fn]) Sie entfernen nicht den Watcher* in jComponent 20: Es vergleicht den Parsedweg des Wachers mit einem String, so dass nichts entspricht. unwatchWenn Sie einen Wacher stoppen müssen, überprüfen Sie eine Flagge in fn.
Das globale CMD(name) rief einen mit self.command registrierten Befehl nicht auf: Nur self.CMD(name) tat es.

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>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau