Zugriff auf Ressourcen von Komponenten

Bei der Arbeit mit der Konsole muss man darauf achten, das die Konsole aus mehreren HTML-Dokumenten besteht und zum Beispiel jQuery immer nur mit dem aktuellen Window/Dokument arbeitet.

Achtung

Um Probleme mit Abhängigkeiten zur Komponenten zu vermeiden, sollte man nur die öffentliche API der Komponenten verwenden und nicht direkt auf Template oder Ressourcen zugreifen.

Muss man aber auf Ressource, Template oder auf die Struktur einer Komponente zugreifen, so muss man sich den Kontext das betreffende Dokument beschaffen.

Die importierten HTML-Dokumente können über das entsprechende Link-Element ausgelesen und angesprochen werden. Dies kann mittels jQuery jQuery('link[rel=import]') oder einfache DOM-Methoden document.querySelector('link[rel="import"]') erfolgen.

Das DOM des importierten HTML-Dokuments wird über die link.import-Eigenschaft referenziert.

jQuery('link[rel=import]').get(0).import

Hinweis

link.import ist unter den folgenden Umständen null: * Der Browser unterstützt keine HTML-Imports * Das Attribute rel="import" wurde nicht gesetzt. * Link ist nicht Bestandteil des DOM * CORS schlägt fehl

Alternativ kann man sich das DOM der Komponente auch über Alvine besorgen. Alle von Alvine importierten Komponenten werden in die Alvine-Registry eingetragen und können über Alvine.Registry.get('Components').get('MyComponent') ausgelesen werden.

Der betreffende Kontext - das Dokument der Komponente - kann über Component.getDocument() ausgelesen und anschließend für den Zugriff auf das gewünschte Element, verwendet werden.

In dem folgenden Beispiel wird aus der Komponente MyComponent die HTML-Struktur für ein Template ausgelesen und ein Template-Objekt erstellt.

// Kontext/Dokument der Komponente
context = Alvine.Registry.get('Components').get('MyComponent').getDocument();
// Template im Kontext der Komponente MyComponent suchen
jqTemplate = jQuery(context).find('#mytemplate');
// Template-Objekt erstellen
template = new Alvine.DOM.Template(jqTemplate);