angularjs שיעור 8: watch$

(לקוח מתוך מדריך angularjs בעברית)

כבר ראינו כי data binding מאפשר ל AngularJS לעקוב אחר ערכים במודל, ולהציג אותם ב view כאשר הם משתנים.
לעיתים נדרש מעקב מורכב יותר:
אנו רוצים לעקוב אחר מספר משתנים, ולבצע פעולה כאשר הם משתנים.
בדוגמא הבאה אעקוב אחרי הסכום של שני ערכים, ואציג אותו כאשר הוא יישתנה.

function HelloController(a) {
  a.nums = {
    one: "7",
    two: "8",
    sum: "15"
  };
...

בשלב הראשון הגדרנו את ה controller, והזרקנו לתוכו את ה – scope$.
בכוונה השתמשתי בפרמטר בשם אחר (בדוגמא a), מפני שההזרקה עצמה הביאה את ה scope$ הנכון (בשורה האחרונה):

mod.controller('HelloController', ['$scope', HelloController]);

בתוך ה scope$ הגדרתי אובייקט פנימי (nums), ובו שלושה שדות.

כתבתי שתי פונקציות:
checkSumOfNums – משמשת לחישוב הביטוי אחריו ארצה לעקוב. הפונקציה מחזירה את ערך הביטוי.
showSum – הפעולה שאותה ארצה לעשות כאשר הביטוי השתנה.

function checkSumOfNums()
  {
    return (parseInt(a.nums.one) + parseInt(a.nums.two));
  }
  function showSum(newValue, oldValue, s) {
    s.nums.sum = newValue;
  };

(הכל מוגדר בתוך ה – controller)
נותר רק לחבר הכל באמצעות watch$:

  a.$watch(checkSumOfNums, showSum);

קרי:
"עקוב באופן רצוף אחרי הסכום של one + two. אם הוא יישתנה, הכנס את התוצאה ל sum."

Digest Loop

כיצד פועל מנגנון ה – Data Binding ? מתי מתבצע המעקב שלי ?
בעצם מדובר בפתרון הדומה למשחקים רבים, או אנימציות, בהן הלוח המשחק (או חלקים ממנו) מצויירים שוב ושוב, מספר פעמים בשנייה.
AngularJS "מבינה" שייתכן והמבט אינו מתאים לתצוגה (או להיפך) בעקבות אירועים שקרו (לדוגמא שינוי בערך בתוך שדה input). במצב כזה מופעל מנגנון ה – Digest Loop. הקוד בודק מה השתנה ועדיין לא עודכן, ומעדכנת את הערכים. הבדיקה קוראת לפונקציות הבדיקה שנרשמו באמצעות watch$, וקוראת לפונקציות הטיפול. אחר כך, התהליך חוזרעלעצמו, מפני שהעידכון עצמו יכול ליצור שינויים. בסופו של דבר התהליך צריך להתייצב, כאשר ה – view מציג את המודל.
אם התהליך לא מתייצב לאחר 10 מחזורים כאלה,  AngularJS מייצרת שגיאה.
לאחר ההתייצבות, תהליך ה – Digest Loop מפסיק, ומתחדש רק כאשר מתגלים אירועים חדשים שבגללם אולי השתנה המצב (כלומר, שוב ה – view לא מציג את המודל במדוייק).

להלן דוגמא המאפשרת לראות כיצד ה digest מתבצע. כאשר משנים את שדה ה – input נקראת פונקציית הטיפול:

See the Pen Digest Test by Yuval Shaul (@YuvalShaul) on CodePen.10739

 


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *