In diesem Snippet haben wir eine sehr einfache, einzeilige , die die staticdata.data-Eigenschaft der zurückgegebenen Hyrule-Kompendium-API ausgibt. Wir wenden den Filter |json:2 an, um ihn in einem besser lesbaren Format anzuzeigen. StaticData unterstützt JSON (neben anderen Formaten) standardmäßig. Sie geben ihm einfach die URL zur API und können dann mit der Verwendung der Daten beginnen. Ist StaticData verwirrend? Probieren Sie dieses Tutorial zur Integration der GitHub-API aus oder experimentieren Sie mit den interaktiven Beispielen im Abschnitt „StaticData“ des Tutorials des Modulo.js-Tutorials.

Versuchen Sie, dieses Snippet auszuführen. Sehen Sie die resultierenden Daten? Wir müssen das mit einer for-Schleife durchlaufen.

Erstellen einer Bildergalerie

Da wir nun sehen können, dass ein Attribut .data ein Array von Objekten enthält, durchlaufen wir es und generieren eine Galerie:

Dadurch werden viele IMG-Tags generiert, von denen jedes einen src= hat, der den „Bild“-Eigenschaften der Objekte im ursprünglichen JSON-Array und dem {% für %} zugewiesen ist. template-tag ist die Syntax, um ein bisschen HTML für jedes Element im Array zu duplizieren (ganz zu schweigen von jedem Index, z. B. einer Zahl, die von 0 aufwärts zählt). Zur weiteren Übung finden Sie in Teil 4 des Modulo.js-Tutorials viele interaktive Beispiele für die for-Schleife.

Zustand und Skript erstellen

Als nächstes müssen wir ein neues Script-Tag erstellen, mit dem wir eine einfache, einzeilige JavaScript-Funktion schreiben können:

Dies ist eine Kerntechnik für die Skripterstellung bei der Verwendung von Modulo: Erstellen Sie Funktionen, mit denen Sie den Status mithilfe von JavaScript ändern können. In diesem Fall führt es einen sehr einfachen Vorgang aus: „Dieses Monster für später speichern“. Genauer gesagt weist es der gegebenen Nutzlast die Zustandsvariable „ausgewählt“ zu. Auf diese Weise wird die Statusvariable „ausgewählt“ zu einer Art „Versteck“ für das Monster, das gerade aus der API ausgewählt wurde.

Anhängen des Klickereignisses

Fügen wir nun ein weiteres Puzzleteil hinzu: das Anhängen des Klickereignisses. Siehe unten:

Dies wurde mit der Ereignisanhangssyntax (@click:=) durchgeführt, in diesem
Fall) und ein Payload-Attribut, mit dem wir das von uns ausgewählte Monster weitergeben können, indem wir auf dieses Bild klicken. Ereignisse und Skript-Tags können ein verwirrendes Thema sein, wenn Sie neu in JavaScript sind (und selbst wenn Sie es nicht sind!), also sehen Sie sich die Beispiele auf dieser Seite an, um weitere Beispiele für die Verwendung von Skript-Komponententeilen und das Anhängen von Ereignissen zu erhalten.

Anhängen des Klickereignisses

Zum Schluss rendern wir die Monsterinformationen bedingt, wenn ein Monster ausgewählt wird:

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

Dadurch wird zunächst die „Willkommen“-Nachricht angezeigt (da state.selected mit null beginnt). Sobald dann jemand auf ein Monsterbild klickt, ist die Variable state.selected nicht mehr null und
Stattdessen werden die Inhalte mit den Tags h1 und p formatiert angezeigt, wobei einige Optimierungen vorgenommen wurden (|capfirst macht den ersten Buchstaben groß).

– Einbettbarer Snippet

Alles kombinierend, packen wir dann alles in ein display: Grid, um das Side-by-Side-Layout zu erstellen, und ein overflow: auto zum linken div der Bildlaufleiste. Schließlich können wir dem zweiten Div noch ein paar abschließende CSS-Optimierungen hinzufügen (Auffüllung, Rand und einen linearen Farbverlauf) und erhalten die folgenden Ergebnisse, die überall eingebettet werden können:

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Wenn ja, folgen Sie uns für weitere solcher Tutorials!