Programmieren mit Velo: Repeater

In dieser Lektion geht es um Repeater, was sie sind und wie du sie benutzen kannst.

Wenn du eine Reihe von Objekten hast, die du auf deiner Website schön geordnet anzeigen willst, kann ein Repeater dir dabei helfen.

Repeater können Daten dynamisch oder statisch verarbeiten und in diesem Kurs zeigen wir dir, wie beides geht.

Ein Repeater ist eine Liste von Elementen mit definierten visuellen Eigenschaften, die du anzeigen kannst, wobei sich auch Elemente wiederholen können.

Nehmen wir an, ich möchte eine Liste der Mitarbeiter anzeigen, die bei mir in einem bestimmten Job arbeiten.

Wie hier zu sehen ist, kann ich eine Liste von Personen haben, wobei das Design gleich bleibt, alle Namen haben die gleiche Schriftart und auch wenn ich weitere Elemente in die Website oder den Repeater einfüge, wiederholen sich die Elemente für alle anderen Objektlisten, sodass das Design immer gleich bleibt.

Wenn ich diesen Button zum ersten Repeater hier hinzufüge und dieses Objekt anfüge, wird das auch für alle anderen Repeater-Elemente so übernommen.

Damit sind wir direkt beim Thema der Struktur von Repeatern.

Wie ich schon sagte, ist ein Repeater visuell eine Liste von Objekten, die wir schön anordnen können.

Wenn ich also etwas hierhin ziehe und ablege, wird das für alle Elemente übernommen.

Wir können sogar hier unseren Repeater ein bisschen erweitern, auch über diesen Boxen.

Öffnen wir dazu diesen Container.

Wenn du das runterziehst, siehst du, dass alle anderen Objekte das Design vom ersten Objekt übernehmen.

Repeater können dynamische und statische Daten beinhalten.

In diesem Kurs lernen wir, wie man Dienste von Drittanbietern nutzt, um Repeater zu füllen.

Und dasselbe auch mit statischen Daten, die du direkt im Frontend-Code gespeichert hast.

Für diesen Kurs zu Repeatern solltest du ein bisschen Erfahrung sowohl mit Backend- als auch mit Frontend-Entwicklung mitbringen.

Ich empfehle dir deshalb, dir diese beiden anderen Kurse für Frontend und Backend anzusehen.

Jetzt wollen wir erst mal diesen Button loswerden und dann gehen wir wieder auf den Repeater.

Ein Repeater kann auf verschiedene Arten gefüllt werden.

Du kannst das im Code machen oder du kannst mit dem Datensatz und der Content-Verwaltung arbeiten.

In diesem Kurs sprechen wir nicht über Dateneinstellungen und die Content-Verwaltung, sondern konzentrieren uns vor allem aufs Programmieren.

Ich kann hier einfach per Drag-and-Drop einen Repeater auf die Seite ziehen und diesem Repeater eine ID geben.

Wenn ich hier meine Codeansicht öffne, wenn ich den Dev-Modus aktiviert habe, kann ich diesen Repeater auswählen und den Namen ändern.

Mein Planeten-Repeater ist also ein eigenständiges Seitenelement, aber er enthält viele andere Seitenelemente, die sich dann wiederholen.

So kann ich Objekte schön übersichtlich auflisten.

Es gibt verschiedene Ereignishandler, die ich zu Repeatern hinzufügen kann.

Da wären „item onReady“, „item onRemoved“, „mouseIn“, „mouseOut“.

In diesem Kurs zeigen wir dir wie du „item onReady“ und „item removed“ verwendest, weil das die wichtigsten Funktionen sind, die du zum Anzeigen deiner Daten in einem Repeater brauchen wirst.

In der nächsten Lektion lernen wir, wie du statische Daten zu deinem Repeater hinzufügst, so wie du es gerade hier mit „_id“ siehst.

Und wir zeigen dir, wie genau du all diese Daten direkt in einen Repeater importierst.

Das sehen wir in der nächsten Lektion.