יצירת Partial View בנוד NodeJS
footer.ejs, גוזרים אליו את התגית החוזרת מהדף, ומשאירים בו רק את הקוד לשכפול, בלי תגיות כמו HTML, head ו-body. אלה קיימות רק בדפים עצמם.include עם הנתיב היחסי לקובץ.header.ejs ושמים בו גם את הכותרת העליונה, גם את התפריט וגם קו הפרדה (HR), ואז משלבים אותו בדף הבית ובדף ה-About.menu.ejs, כי הוא עשוי לגדול. את ה-include שלו שמים בתוך ה-header, ומתברר שאפשר לשלב partial בתוך partial אחר.Unexpected identifier בזמן הקומפילציה של EJS, כלומר בעיית תחביר.<%- include('...') %>, כך ש-include היא פונקציה. מתקנים כך בדף הבית, ב-About וב-header, והאתר עובד.<%- include('menu.ejs') %>, כשהנתיב יחסי לתיקייה של הקובץ.פרקי ההרצאה: יצירת Partial View בנוד NodeJS
תמלול ההרצאה: יצירת Partial View בנוד NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Partial View בנוד NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז איך אנחנו מונעים שכפולים כאלה בתוך ה-HTML שלנו? אז למעשה, מה שאנחנו צריכים להשתמש זה משהו שנקרא partial views.
partial views זה בעצם חלקי views שאנחנו אחר כך יכולים לשתול בכל מקום שאנחנו רוצים. אנחנו בונים אותם על ידי קבצי EJS רגילים, אבל שמכילים רק את המידע שאנחנו רוצים לשתול.
בואו נתחיל עם הפוטר. פוטר זה בעצם תגית שמכילה משהו שחוזר על עצמו בכל הדפים. אז בואו ניגש כאן ללייאוט ונייצר לעצמנו פוטר נקודה EJS, כמובן יכלנו לקרוא לזה בכל שם אחר.
נחזור, ניקח את כל התגית הזאת, נגזור אותה, נשים אותה בתוך הפוטר בלבד. אין לנו פה כמובן בתוך הפרשלס את כל התגיות של הדף המרכזיות, כמו html, head, body.
זה קיים רק בדפים עצמם. אז כאן שמנו רק את הקוד שאנחנו רוצים לשכפל. אנחנו חוזרים עכשיו, זה היה ב-about, וכותבים את הפקודה הבאה.
יש לנו פתיחת תגית אחוז ואחוז סגירת תגית. ברגע שאנחנו כותבים תגית כזאת, זה מציין למנוע של ejs, הרי היא טמפלייטינג אנג'ן למנוע שלה שמה שכתוב פה מתבצע בצד של השרת וכאן יכולות להיות המון פקודות שונות שהמנגנון של הטמפלייטינג אנג'ן יודע לבצע.
הפקודה שאנחנו מחפשים עכשיו נקראת אינקלוד. כלומר לך תחפש קובץ בגלל שאני נמצא כבר בתיקיית layout אז אני יכול לומר לו את הנתיב היחסי שלי קובץ שנקרא פוטר נקודה EJS והוא יחפש אותו באותה תיקייה.
בואו ניקח את הקוד הזה נלך לדף הבית במקום כל הקוד הזה נשים רק את ה-include של בוא שים לי פה את הקוד השני. נבצע את אותו הדבר עבור ה-header.
ניקח פרשל שנקרא header.EJS ונחזור לדף הבית ובואו נניח שאנחנו רוצים, האמת בואו נעשה משהו מעניין. בואו ניקח את כל זה ונשים בהדר אבל נחלק תכף את זה לפרשל משלו.
תכף נראה מה הכוונה. אני הולך להדר ואני שותל את כל זה כי למעשה אם אני מסתכל על האתר הכותרת שלי מכילה גם פה את התפריט וגם את הכותרת העליונה.
אפילו בואו נוסיף כאן איזה קו הפרדה כזה hr כזה אז יש לנו כאן את הכותרת את התפריט יש לנו את הכותרת העליונה ויש לנו תפריט קו הפרדה כולם נמצאים באזור של ההדר נחזור לדף הבית ניקח איזשהו include פה למעלה שמשלב את ההדר נקודה ejs שכמובן נמצא בתיקייה הנוכחית נבצע את אותו הדבר ל-about וכבר חסכנו פה המון קוד כל דף יש לו רק את
ששייכות אליו מיין ב-HTML והאזור הראשי של הדף עצמו. בואו נבצע את אותו הדבר עבור מניו EJS. למה אנחנו רוצים לעשות את זה? כי המניו, יכול להיות שבהמשך הוא יהיה די נרחב וכדאי אולי להכניס אותו למעין קובץ פרשל משלו.
יכול להיות שבמניו יהיה גם כל מיני הגדרות נוספות שאנחנו נרצה בהמשך. שמנו אותו בנפרד אבל השאלה היא איפה עכשיו אני שם את ה-include שלו אז אני יכול לשים את ה-include כאן שוב ושוב בדפים אבל בואו נראה שגם אם אני שם include בתוך קובץ פרשל אחר לדוגמה בהדר אז הכל אמור לעבוד כמו שצריך יש לנו פה אינקלוד מניו נקודה EJS תחפש לי את המניו
גם כן באותה עתיקייה ואנחנו רואים שאינקלוד נקודת אינקלוד יכולה להיות בתוך פרשל שמוגדרת כאינקלוד במקום אחר אין שום בעיה לעשות את זה אז בואו נעצור רגע את הריצה כמובן שאנחנו צריכים לעצור כי יש פה דברים שקשורים למנוע עצמו שרץ בצד של השרת להריץ שוב