Maintenant, les recettes doivent bien sûr être affichées sur l'écran de la catégorie de repas, qui est l'écran que nous chargeons lorsque nous avons
sélectionné une catégorie et, évidemment, pour rendre
toutes les recettes, nous en avons besoin, nous avons besoin de recettes pour les repas comme je les
appelle également ici et Je vais commencer par ajouter un nouveau modèle, le repas. js où je définis à quoi devrait ressembler
un repas dans cette application.
Maintenant, cette définition supplémentaire est facultative,
mais je pense qu'elle facilite un peu la réflexion sur nos données et leur structure.
Je vais donc mettre en place une classe ici et
l'exporter et dans cette classe, ajouter un constructeur qui nous permet de créer de nouveaux repas préconfigurés en fonction de la structure que nous sommes sur
le point de mettre en place ici.
Désormais, un repas sera plus complexe qu'une catégorie, il aura
un identifiant
mais il aura également des identifiants de catégorie auxquels il
appartient, donc plusieurs catégories auxquelles un repas peut appartenir.
Il aura un titre,
donc
un nom, puis il aura des champs supplémentaires comme l'abordabilité d'un
repas, est-ce donc cher, est-ce bon marché?
La complexité, alors combien il est complexe de préparer ce plat à partir de cette recette. Une imageUrl qui pointe vers une image sur le web où
nous avons une belle photo de ce repas. La durée qu'il faut en minutes
pour créer ce repas, aussi les ingrédients qui devraient être un tableau, les étapes que nous
devons prendre pour faire ce repas, donc les instructions et ensuite quatre champs qui nous aident à
filtrer - estGlutenFree qui indique s'il s'agit de gluten gratuit ou non, ce sera donc un booléen, isVegan, isVegetarian
et isLactoseFree, ce
sont les quatre champs que j'utiliserai dans cette application.
Maintenant, toutes ces données que nous obtenons ici seront ensuite stockées dans
les propriétés, alors ici je vais définir cet ID égal à ID, cet ID de catégorie égal à ID de catégorie, ce
titre égal à title, cette imageUrl égale à imageUrl et ainsi bien sûr, il suffit donc de stocker tous
les arguments que nous obtenons dans les propriétés de cela, l'objet à la fin sera créé en
fonction de la classe.
Donc, nous allons également obtenir nos étapes ici bien sûr, nous stockons la durée, nous stockons la complexité,
nous stockons l'abordabilité ici bien sûr dans une propriété, nous stockons si c'est sans gluten
et aussi tous les autres
filtres bien sûr, donc est végétalien, c'est végétarien devrait également être stocké bien sûr et isLactoseFree, qui sera également
stocké et oui avec cela, je stocke
toutes ces données.
Maintenant, nous pouvons ajouter des données factices, des repas factices et bien sûr, vous les trouverez à nouveau.
Tout ce que vous devez faire dans des données fictives. Le fichier js consiste à importer des repas à partir du dossier des modèles et à partir de ce repas. js ou juste à partir d'un repas comme
celui-ci et maintenant attaché dans le fichier Javascript que vous trouvez attaché, vous trouvez également ce tableau
de repas que vous pouvez ajouter ici et qui n'est maintenant qu'un tas de recettes que j'ai préparées pour vous qui utilise ou
qui utilise tous les champs nous avons mis en place dans notre modèle.
Maintenant, ce sont des données factices avec lesquelles
nous travaillons, commençons maintenant à travailler avec cela et rendons une liste de ces repas sur l'écran de la catégorie des repas.
Bien sûr, seuls les repas qui entrent dans la catégorie que nous avons sélectionnée, ont donc notre ID de catégorie.