Jetzt sollten die Rezepte natürlich auf dem Bildschirm "Kategorie Mahlzeiten" gerendert werden. Dies ist der Bildschirm, den wir laden, wenn
wir eine Kategorie ausgewählt haben.
Um Rezepte zu rendern, benötigen wir natürlich Rezepte für Mahlzeiten, wie ich sie hier und
auch nenne Ich werde mit dem Hinzufügen eines neuen Modells beginnen, Mahlzeit. js wo ich definiere, wie eine Mahlzeit
in dieser App aussehen soll.
Jetzt ist diese zusätzliche Definition optional,
aber ich denke, es macht es ein bisschen einfacher, über unsere Daten und ihre Struktur nachzudenken.
Also werde ich hier eine Klasse einrichten
und exportieren und in dieser Klasse einen Konstruktor hinzufügen, mit dem wir neue vorkonfigurierte Mahlzeiten basierend auf der Struktur erstellen
können, die wir hier einrichten möchten.
Jetzt ist eine Mahlzeit komplexer als eine Kategorie, sie
hat eine
ID, aber auch einige Kategorie-IDs, zu denen sie gehört,
sodass mehrere Kategorien, zu denen eine Mahlzeit gehören kann.
Es wird einen Titel
haben, also
einen Namen, und dann wird es einige zusätzliche Felder geben, wie die Erschwinglichkeit einer
Mahlzeit. Ist es also teuer, ist es billig?
Die Komplexität, also wie komplex es ist, dieses Gericht nach diesem Rezept zuzubereiten. Ein imageUrl, das auf ein Bild im Web zeigt, auf dem
wir ein schönes Bild von dieser Mahlzeit haben. Die Dauer, die in Minuten benötigt
wird, um diese Mahlzeit zuzubereiten, auch die Zutaten, die eine Reihe sein sollten, die Schritte, die wir
unternehmen müssen, um diese Mahlzeit zuzubereiten, also die Anweisungen und dann vier Felder, die uns beim Filtern helfen
- isGlutenFree, das angibt, ob dies Gluten ist kostenlos oder nicht, dies ist also ein Boolescher Wert, isVegan, isVegetarian und
isLactoseFree. Dies sind
die vier Felder, die ich in dieser App verwenden werde.
Jetzt werden alle Daten, die wir hier erhalten, in
Eigenschaften gespeichert. Hier setze ich diese ID auf ID, diese Kategorie-ID auf Kategorie-ID, diesen Titel auf Titel,
diese imageUrl auf imageUrl und so weiter Wenn Sie also einfach alle Argumente speichern, die
wir in den Eigenschaften davon erhalten, wird das Objekt am Ende basierend auf
der Klasse erstellt.
Also werden wir hier natürlich auch unsere Schritte bekommen, wir werden die Dauer speichern, wir werden die Komplexität
speichern, wir werden die Erschwinglichkeit hier natürlich in einer Immobilie speichern, wir werden speichern, ob
dies glutenfrei ist und auch
Alle anderen Filter natürlich, also isVegan, das ist vegetarisch sollte natürlich auch gespeichert werden und isLactoseFree, das wird auch
gespeichert und ja damit speichere ich
all diese Daten.
Jetzt können wir einige Dummy-Daten, einige Dummy-Mahlzeiten hinzufügen und natürlich finden Sie diese wieder im Anhang.
Alles was Sie in einem Dummy-Daten tun müssen. js Datei ist Mahlzeit aus dem Modellordner und dort aus Mahlzeit importieren. js oder einfach von einer Mahlzeit wie
dieser und jetzt in der Javascript-Datei, die Sie im Anhang finden, finden Sie auch das Menü für
Mahlzeiten, das Sie hier hinzufügen können, und das ist jetzt nur eine Reihe von Rezepten, die ich für Sie vorbereitet habe und
die alle Felder verwenden oder verwenden Wir haben uns in unserem Modell eingerichtet.
Nun, das sind Dummy-Daten, mit denen
wir arbeiten. Beginnen wir jetzt damit und rendern eine Liste dieser Mahlzeiten auf dem Bildschirm "Kategorie Mahlzeiten".
Natürlich nur Mahlzeiten, die in die von uns ausgewählte Kategorie passen, also unsere Kategorie-ID haben.