Ratgeber: Wiederholte Karten aus einer HTML-Vorlage eindeutig befüllen

Gleiche Form bedeutet nicht gleichen Inhalt

Eine kleine Materialsammlung soll mehrere Karten mit Titel, Beschreibung und einem Detailknopf anzeigen. MDN beschreibt das HTML-Element template als Mechanismus zum Bereithalten von HTML-Fragmenten, die unter anderem später durch JavaScript verwendet werden können. Für diesen Ratgeber betrachten wir nur diesen einfachen Einsatz. Die aktuell gelesene Dokumentation ist unsere technische Grundlage; wir behaupten keine heutige Einführung. Das eigene Übungsprojekt besteht aus drei neutralen Materialeinträgen und braucht weder ein Framework noch einen externen Datendienst.

Eine Karte bewusst klein halten

Entwirf zunächst genau eine Karte. Sie enthält eine Überschrift, einen Textabsatz und eine eindeutig benannte Aktion. Danach bereitest du die drei Datensätze getrennt davon vor. Einer besitzt eine lange Beschreibung, einer eine kurze, beim dritten fehlt die optionale Zusatznotiz. Schreibe ausdrücklich auf, ob diese Notiz bei fehlendem Inhalt entfällt oder durch einen Hinweis ersetzt wird. Ein sichtbarer Platzhalter wie „Text hier“ wäre im fertigen Ergebnis keine akzeptable Ersatzdarstellung. Die Vorlage sollte nur Struktur liefern, keine versehentlich veröffentlichten Beispieldaten.

Jede erzeugte Kopie kontrollieren

Lass die spätere Umsetzung für jeden Datensatz eine eigene Kopie befüllen. Wenn Elemente Kennungen benötigen, müssen diese nach dem Einfügen weiterhin eindeutig sein. Besonders wichtig ist die Zuordnung eines Detailknopfs zur richtigen Karte. Teste nicht nur den ersten Eintrag: Öffne zuerst die dritte Karte und prüfe Titel und Inhalt ihrer Detailansicht. Eine falsche gemeinsame Kennung kann bei der ersten Karte unauffällig bleiben und bei weiteren Einträgen die Bedienung durcheinanderbringen. Notiere solche Fälle als konkrete Abnahme statt nur „Karten funktionieren“ zu schreiben.

Eine zweite Darstellung ergänzen

Sortiere die drei Testeinträge anschließend um und entferne einen davon. Die verbleibenden Aktionen sollen weiterhin zu ihren eigenen Daten führen. Prüfe außerdem eine vollständig leere Sammlung mit einer verständlichen Erklärung und einer möglichen nächsten Handlung. Auf dem Handy müssen lange Überschriften umbrechen können, ohne den Detailknopf zu verdrängen. Der fertige Bauauftrag beschreibt damit Struktur, Datenzuordnung und leere Zustände getrennt. Die Verwendung einer HTML-Vorlage ist dabei ein Mittel zur Wiederverwendung; sie ersetzt keine Prüfung der Inhalte und keine verlässliche Verbindung zwischen Anzeige und tatsächlichem Datensatz.