knowthelist / fhem-tablet-ui

UI builder framework for FHEM
MIT License
148 stars 84 forks source link

initWidget für DOM Selektor #135

Closed svenson08 closed 8 years ago

svenson08 commented 8 years ago

Ich erstelle zur Laufzeit Dialoge/Popups. Das reduziert die Abfragen an FHEM und verbessert meine Seitenladezeit. Im Popup enthaltene Widgets müssen dazu initialisiert werden. Dabei soll nur ab dem DOM Selector und nicht alle Widgets der Seite aktualisiert werden.

svenson08 commented 8 years ago

In dem von mir benutzten Javascript zum erstellen des Popups rufe ich z.B. _initWidgets('#DialogSelector'); _ auf. Die Änderungen an fhem-tablet-ui.js habe keine Auswirkungen auf bestehende Installationen und bleibt daher kompatibel.

Wäre toll wenn das übernommen würde.

knowthelist commented 8 years ago

Danke, ich habe es übernommen. Wie sieht dein Popup Code aus. Vllt. kann ich davon auch etwas einbauen ...

svenson08 commented 8 years ago

Da ist nicht wirklich was dabei. Mal vereinfacht wie ich den Dialog im JS erstelle

var buildDialog = '<div id="HeatingOptions_01" class="block info">'+
        ..... HTML des Dialogs .....
          '</div>';

$('body').append(buildDialog);
HeatingModusDialog = $( "#HeatingOptions_01" ).dialog({
    ...Dialog Optionen....
        create: function () { 
        initWidgets('#HeatingOptions_01'); 
    },
        close: function( event, ui ) {            
            $("#HeatingOptions_01").remove();
        },

});

Vom Prinzip: HTML Struktur an body anhängen, Dialog erstellen, im Create des Dialogs die Widgets in der neuen HTML Struktur initialisieren, beim schließen des Dialogs die HTML Struktur löschen.

Da ich die Popups nicht regelmäßig oder permanent nutze ist das so für mich eine schlanke und Ressourcen schonende Lösung. Ich wollte nicht die Readings von x nicht sichtbaren Dialogen auf einer Seite im Hintergrund aktualisiert bekommen. Die Popups werden von mir nur zur "Konfiguration" genutzt (z.B. den Modus der Heizkörperthermostate umschalten). Das erstellen und löschen des Dialogs ist dabei ähnlich wie ich es mit meinem wdtimer Widget mache.