Component footer with links

sippsack commented 7 years ago

@ahus1, @steffchep, @ascheman: please take a look at my first attempt, git commit https://github.com/dukecon/dukecon_pwa/commit/074c1832bfa928d1a3025da8c1f9671875b20da7 (I've forgotten to mention the ticket number)

ahus1 commented 7 years ago

@sippsack - ich würde es erst nach dem Review schließen wollen.

Was mir auffällt: der Code wird nur funktionieren, wenn die init-Daten vor dem Footer geladen werden. Wenn Du den Vue-Update-Mechanismus verwenden willst, so gibst Du eine Datenstruktur zurück, die zunächst nur Dummy-Werte enthält und im nachhinein gefüllt wird. Beispiel ist die events struktur, die 1:1 nach außen gegeben wird uns ich - sobald sie geladen ist - im Vue aktualisiert.

sippsack commented 7 years ago

@ahus1: weiß noch nicht genau, wo ich das machen muss? In der Conference.js?

Die Links.vue sieht sehr ähnlich zu Schedule.vue aus. In Conference.js setzen wir mit Vue.set die einzelnen Events in ein neues Objekt/Map, welches am Anfang leer initialisiert wurde (const events = {})

ahus1 commented 7 years ago

Wir arbeiten an dieser Stelle mit einem globalen Model. Das hat den Vorteil dass Vue Änderungen an den Daten mitbekommt.

Conference gibt die Events Struktur nach außen. Diese Struktur kann am Anfang leer sein (wird ja asynchron geladen). Dank Vue und View Binding wird die Anzeige aktualisiert sobald sind Events geladen sind.

Bei den Links bist du anders vorgegangen: statt das Model nach draußen zu geben fragst du einzelne Linktexte ab. Diese Evaluation wird nur einmal in dem Moment durchgeführt in dem die Funktion ausgeführt wird. Es kann sogar sein dass die Daten noch gar nicht geladen sind und die Funktion ein leeres Imprint zurückgibt.

Analog zur Events Struktur wäre es, wenn du oben eine leere Links Struktur setzen würdest, diese beim erfolgreichen Laden von init.json aktualisiert und jedes Mal, wenn du geLinks aufrufst die oben (global) definierte Struktur zurückgibst.

Ich habe mal etwas geändert. Außerdem fiel mir dabei noch auf, dass es nicht funktionierte, wenn man direkt ein Event aufgerufen hatte (da wurde auch zuerst das getEvent ausgewertet, bevor alle Events geladen waren.

sippsack commented 7 years ago

@ahus1: cool, danke für die Erklärung und die Anpassungen. Eine Frage noch: Warum rufst Du hasOwnProperties auf?

for (const key in response.data) {
  if (response.data.hasOwnProperty(key)) {
    Vue.set(conference, key, response.data[key])
  }
}

Wenn ich es richtig verstehe, liefert hasOwnProperty true zurück, wenn das Property in dem Objekt direkt drin ist und nicht über die Prototype-Vererbung reinkommt. Kann das hier passieren bzw. welchen Fall willst Du damit ausschließen?

ahus1 commented 7 years ago

Naja, war ein Codebeispiel irgendwo aus dem Internet um Objekte zu mergen. Die data an dieser Stelle ist wahrscheinlich so einfach, dass es auch ohne gehen könnte. Aber man weiß ja nicht was die verschiedenen JavaScript-Bibliotheken für einen Unfug machen ...

ahus1 commented 7 years ago

@sippsack - nun haben wir beide draufgeschaut; daher schiebe ich dieses Ticket nun auf Done.

dukecon / dukecon_pwa

Component footer with links #3