Component Communitaction

תמלול ההרצאה: Component Communitaction

הטקסט המלא של הדקות הראשונות בהרצאה «Component Communitaction» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   טוב חברים בלי ששמתם לב למדנו כמעט את כל השיטות של תקשורת בין הקומפוננטות ונשארה לנו למעשה שיטה אחרונה אבל בואו נעשה סקירה קצרה של כל השיטות שראינו עד עכשיו ונגיע לשיטה האחרונה ונעשה דוגמה איתה אז בשלב הזה אני עושה חזרה קצרה על כל שיטות התקשורת בין הקומפוננטות שימו לב אנחנו כרגע מדברים על קומפוננטה ראשית וקומפוננטה משנית בתוכה קומפוננטת הבן וקומפוננטת האב אז אנחנו מתחילים פה את

2. 00:32

   כל הרעיון להעביר מידע מפרנט לצ'יילד בשיטה הראשונה, זאת השיטה הראשונה, אינפוט ביידינג. מה זה אינפוט ביידינג?

3. 00:41

   זה שטרודל אינפוט. ראינו שיש לנו פה רכיב שטרודל אינפוט ואנחנו מקומפוננטה הראשית קובעים אותו. הנה דוגמה, סוגריים מ-40 הירו שזה בעצם הירו הזה פה באינפוט וזה קומפוננטה הראשית.

4. 00:55

   זאת השיטה הראשונה וראינו איך היא עובדת, שימו לב זה עובד רק עם סלקטור ורק בין אב לבן. והסלקטור של הבן Hero Child הוא גם משוכפל על ידי NG4 ויש פה מאפיין Hero שזה האינפוט שלו והם נותנים פה גם קובץ טסט בשביל לעשות ספציפיקציות בדיקה שהקומפוננט תתקינה אנחנו אולי נדבר על זה בהמשך הלאה שיטה הבאה נקראת input property כמו שעשינו לפני כן אבל עם סתר זה זה input עם סתר מה זה אומר עם סתר

5. 01:24

   זה אותו input אבל במקום name פשוט אנחנו עושים פונקציה שהיא סתר אתם זוכרים למדנו סתר וגתר שלמעשה פונקציה מתחפשת למשתנה רגיל והשימוש של זה למעשה זה אותו שימוש רק אם מישהו מעביר לי name ריק name שהוא ריק או name שאחרי הורדת רווחים הוא ריק אז במקום השם אני אכתוב את הדבר הזה no name set אז כשמישהו יעביר לי name ריק אני אתפוס את זה זה

6. 01:31

   למעשה פונקציה שמתחפשת למשתנה רגיל ושימו לב זה אותו שימוש אני לוקח סלקטור של child ובפנים שם סוגריים מרובעים ונותן איזשהו שם ואתם יכולים לראות שמערך של ניימס יש בתוכו רווחים ריקים, רווח כזה, רווח כזה, וכשיש רווח כזה שזה האיבר השלישי הוא יכתוב פה no name set.

7. 02:09

   ועוד פעם הם נותנים קובץ של טסט. השיטה הבאה זה NG on Changes, זה למעשה הדבר האחרון שראינו, NG on Changes. ה-NG on Changes הזה זה למעשה לזהות, detect, שהאינפוט פרופרטי, שהאינפוט השתנה.

8. 02:23

   למעשה אנחנו בתוך צ'יילד מזהים שמישהו שינה לנו את האינפוט ומגיבים על זה. שימו לב, NG on Changes הוא חלק מ-Lifesicle Hooks, מהוקים, כל מיני פונקציות שמופעלות תוך כדי מחזור החיים של קומפוננטה.

9. 02:36

   איך אנחנו עושים את זה? אנחנו בתוך קומפוננטת הבן תופסים שינוי של רכיב input, וברגע שאחד האינפוטים משתנה מופעלת פונקציה NG on Changes. ככה עשינו עם Product Details, יש לנו Product Details, ברגע שמישהו מחליף לי אינפוט שלו פונקציה NG on Changes מופעלת אוטומט, ואחרי שהיא מופעלת אוטומט יש לנו חלון שקופץ

10. 02:55

    של מודל. שימו לב הם פה כתבו בצורה מפורשת Implements Engine Changes אני לא כתבתי את זה אז בואו נראה בפרודקט דיטלס שלי אתם רואים פה השתמשתי ב-Engine Changes אבל לא כתבתי הכרזה על זה שאני הולך לממש את זה לא שזה כזה חשוב אבל תדעו ככה הוא מטריע לי שפה שכחתי גם לייבא אותו צריך לייבא אותו להכריז על זה שאני רוצה לממש אותו וההכרזה הזאת למעשה עוזרת

11. 03:21

    לי למקרה שאני אשכח לממש את הפונקציה עכשיו זה יותר כזה סמנטיקה מאשר משהו טכני אז עשינו את ה-Engine on Changes אני מזכיר לכם ש-Engine on Changes אצלנו ברגע שמישהו מכניס לי Product to Show חדש איך שמישהו מכניס לי אינפוט חדש אני בודק שבאמת זה מוצר שקיים ולא Product Name ריק זה לא יתחול וזה לא אחרי הסגירה ואם זה באמת מישהו

12. 03:45

    עשה קליק חדש והכניס לי אינפוט חדש אני עושה מודל show זה מה שעשינו אז אנחנו ממשיכים אז-Engine on Changes ראינו השיטה הבאה לתקשר בין הרכיבים זה על ידי פרנט ליסנס טו צ'יילד איבנטס למעשה הבן מטפטף אירוע לאבא זה איבנט מיטר זה למעשה הבן יוצר אירוע על ידי פונקציית אמית והאבא תופס את האירוע הזה אני מזכיר

13. 04:10

    לכם שאצלנו יש את השטרודל אאוטפוט והאירוע נקרא און ביי אבנט או שטרודל אאוטפוט און קלוז אבנט וכשאחד האירועים האלו אנחנו רוצים להפעיל אותם אנחנו עושים און ביי אבנט נקודה אמית ומטפטפים אירוע אז גם כאן Event Emitter זה האובייקט, Emit הוא מטפטף אירוע, מאחורי זה ממשיכים את זה על ידי Observables

14. 04:31

    אבל אי אפשר להתחייב על זה שמטפטף אירוע. Output אצל הבן והאבא תופס את האיבנט כמו שתופסים תמיד איבנט רגיל. בואו נראה את זה, אצל האבא MyVoter כשהבן שלו מפעיל אירוע OnVoted מופעלת פונקציה אצל האבא מועבר הפרמטר.

15. 04:48

    OnVoted הזה זה למעשה האיבנט שפה יצרנו אותו עם Strudel Output. שימו לב מה הוא עושה, הוא מעביר אמיטר, אירוע מסוג בוליאן, true או false.

16. 04:59

    ופה כשהוא עושה אמיט לאירוע הזה, הוא מעביר לו true או false. יפה מאוד, והאבא תופס את זה, מעביר את זה ל-onwarded אצלו, ו-onwarded אצלו עושה איזושהי פעולה.

17. 05:11

    יפה מאוד. יש פה גם קובץ טסטים של הבדיקות. הבדיקה הבאה נקראת parent interacts with child via local variable. האבא מדבר עם הילד, למעשה האבא מתחבר לילד ביוזמתו, שימו לב, עכשיו האבא מתחבר לילד דרך Local Variable.

18. 05:27

    מה זה Local Variable? זה הסולמית הזאת. מה שקורה כאן שיש לנו פה איזשהו Counter Timer, איזשהו שעון עצר, שזה פונקציה מובנית בג'אווה סקריפט, ובשעון העצר הזה יש כמה שדות, יש פונקציית סטארט, יש פונקציית סטופ, יש פונקציית סקנדס, זה למעשה משתנה, ויש

19. 05:45

    פרייבט קאונט דאון. פרייבט זה אומר שהוא לא נגיש מבחוץ. אז יש לנו את הטיימר הזה, וזה הסלקטור שלו, בקומפוננטה הראשית אנחנו שמים את הסלקטור הזה ומצמידים לו סולמית.

20. 06:00

    ברגע שאנחנו מצמידים לו סולמית למעשה האבא, זה האבא שהוא מפעיל את הילד שלו, הוא למעשה מקבל גישה לאובייקט של הילד דרך הסולמית טיימר ואז הוא משתמש בו כאן כדי להציג את השניות של הילד ופה הוא מפעיל את הפונקציית סטופ ופה הוא מפעיל את הפונקציית סטארט שלו.

21. 06:17

    אז כל הסיפור הזה קורה בתוך טמפלייט בתוך html על ידי משתנה ושימו לב, ברגע שאתה מקבל גישה למשתנה, אתה מקבל גישה לאובייקט שעומד מאחורי הקלעים.

22. 06:28

    אז תדעו שכל פעם שאתם רואים html, אל תחשבו על זה, זה סתם איזשהו html וזהו. תחשבו מה הם האובייקטים שעומדים מאחורי כל דבר, וזה אובייקט בתוך אובייקט. פשוט כלפי חוץ, כלפינו, זה מוצג בצורת טקסט.

23. 06:40

    שימו לב, מאחורי כל תגיד תמיד עומד האובייקט, תמיד יש אובייקט. אנחנו מקבלים גישה לאובייקט הזה ומפעילים