2016-06-13 6 views
0

Wie werden Komponenten gehandhabt, die beim Laden von Dokumenten hinzugefügt werden und auch nach dem ersten Laden der Seite eingefügt werden können?Wie behandelt man Komponenten, die dynamisch auf der Seite hinzugefügt werden können?

Problem

A-Dialog (oder modal) beispielsweise, wenn die Seite geladen einige Javascript, um das Verhalten zu definieren, Funktionalitäten, Event-Handler, etc. an Elementen, die die CSS-Klasse von Komponente verwendet ("myDialog " in diesem Fall). Jedes Element ist eine Instanz und die Komponente kann mehrere Instanzen haben.

Aber was, wenn ich nach dem ersten Laden der Seite einen neuen Dialog hinzufügen muss (z. B. über asynchrone Anfrage)? Muss ich alle Instanzen upgraden? und wenn zweimal das gleiche Element (Instanz) upgraden? Wie verhindern Sie, dass die Instanzen mehrmals aktualisiert werden, sodass beispielsweise die Ereignishandler nicht verdoppelt werden?

Glauben Sie, dass ich keine große Bibliothek/Framework als React, AngularJS, Polymer unter anderem verwenden muss, um nur diese Aufgabe zu behandeln.

Gibt es Bibliotheken, die ein Entwurfsmuster für die Handle-Registrierung und dynamische Upgrades von Komponenten am DOM vorschlagen?

+0

Wer fügt sie hinzu? Warum starten Sie Ihren Initialisierungscode nicht nur für die hinzugefügten Elemente? – Bergi

+0

@Bergi Dies ist nicht die Lösung, nach der ich suche. Wenn ich viele verschiedene Komponenten habe, die aktualisiert werden sollen, muss ich alle kennen und ihren spezifischen Initialisierungscode ausführen. Was ich brauche, ist, diesen Prozess einfacher und einfacher zu machen, mit anderen Worten, automatisch. –

+0

Sie haben viele verschiedene Komponenten, die aktualisiert werden können, ohne auch nur einen bestimmten auf der ersten Seite zu kennen. Worin besteht der Unterschied? – Bergi

Antwort

0

Wenn ich Ihre Frage richtig verstehe, fragen Sie, was passiert, wenn Sie dynamisch eine andere Komponente (modal in Ihrem Beispiel) zu Ihrer Seite hinzufügen. Wenn Sie der dynamisch hinzugefügten Komponente dieselbe Klasse myDialog hinzufügen, wird sie auf dieselben Ereignishandler antworten, die an diese Klasse gebunden sind. Die modalen Komponenten, die bereits vorhanden sind, verhalten sich weiterhin wie zuvor.