Teraz przepisy powinny oczywiście być renderowane na ekranie kategorii posiłków, który jest ekranem, który ładujemy, kiedy
wybraliśmy kategorię i oczywiście,
aby wyrenderować dowolne przepisy, potrzebujemy ich, potrzebujemy przepisów na posiłki, jak również
je tutaj nazywam i Zacznę od dodania nowego modelu, posiłku. js, w której określam, jak powinien
wyglądać posiłek w tej aplikacji.
Teraz ta dodatkowa definicja jest
opcjonalna, ale myślę, że nieco łatwiej jest zrozumieć nasze dane i ich strukturę.
Więc ustawię tutaj klasę i wyeksportuję
ją, aw tej klasie dodam konstruktora, który pozwoli nam tworzyć nowe, wstępnie skonfigurowane posiłki w oparciu o
strukturę, którą zamierzamy tutaj ustawić.
Teraz posiłek będzie bardziej złożony niż kategoria, będzie miał
identyfikator, ale
będzie także miał kilka identyfikatorów kategorii, do których należy,
więc wiele kategorii, do których może należeć posiłek.
Będzie miał tytuł, więc
nazwa,
a następnie będzie miał dodatkowe pola, takie jak przystępność cenowa posiłku, więc
czy to jest drogie, czy jest tanie?
Złożoność, czyli jak skomplikowane jest zrobić to danie na podstawie tego przepisu. ImageUrl, który wskazuje na obraz w Internecie, w
którym mamy ładne zdjęcie tego posiłku. Czas, jaki zajmuje kilka minut, aby
przygotować ten posiłek, także składniki, które powinny być tablicą, kroki, które musimy podjąć, aby
zrobić ten posiłek, więc instrukcje, a następnie cztery pola, które pomagają nam filtrować - isGlutenFree,
który oznacza, czy to jest gluten za darmo czy nie, więc będzie to wartość logiczna, isVegan, isVegetarian
i isLactoseFree,
to cztery pola, których użyję w tej aplikacji.
Teraz wszystkie te dane, które tu otrzymamy, zostaną
zapisane we właściwościach, więc tutaj ustawię ten identyfikator na ID, ten identyfikator kategorii na ID kategorii,
ten tytuł na tytuł, ten imageUrl równy imageUrl i tak oczywiście, więc po prostu
przechowuj wszystkie argumenty, które otrzymujemy we właściwościach tego, obiekt w końcu zostanie utworzony
na podstawie klasy.
Więc oczywiście otrzymamy tutaj nasze kroki, będziemy przechowywać czas trwania, będziemy przechowywać złożoność, będziemy
przechowywać tutaj przystępność cenową tutaj oczywiście w nieruchomości, będziemy przechowywać, czy to
jest bezglutenowe, a także
oczywiście wszystkie inne filtry, więc isVegan, to wegetariańskie należy oczywiście przechowywać i isLactoseFree, które również
będą przechowywane i tak, przechowuję
wszystkie te dane.
Teraz możemy dodać dane pozorowane, niektóre pozorowane posiłki i oczywiście te ponownie zostaną dołączone.
Wszystko, co musisz zrobić w fikcyjnych danych. Plik js importuje posiłek z folderu modeli i tam z posiłku. js lub po prostu z
takiego posiłku, a teraz dołączony do dołączonego pliku JavaScript, znajdziesz również tę tablicę
posiłków, którą możesz tutaj dodać, a teraz jest to tylko kilka przepisów, które przygotowałem dla Ciebie, które
wykorzystują lub które wykorzystują wszystkie pola utworzyliśmy w naszym modelu.
Teraz to są fikcyjne dane,
z którymi współpracujemy, zacznijmy z tym pracować i wyświetlmy listę tych posiłków na ekranie kategorii posiłków.
Oczywiście tylko posiłki, które pasują do wybranej przez nas kategorii, więc mają nasz identyfikator kategorii.