לממש MVVM הרבה יותר קל ממה שנשמע. משום מה יצא לDesign Pattern הזה שם של Design Pattern מורכב, ולפי דעתי זו סתם חוסר הבנה. הDesign Pattern במהותו פשוט עד טריוויאלי.
בפוסט הקודם דיברתי על הסיבות לממש MVVM, ועל הפואנטה שעומדת מאחורי הDesignPattern הזה. העליתי גם שאלה – מה גורם להפרדה של XAML ו Code Behind לא להוות הפרדה מספיק טובה.
אז האמת שההפרדה של XAML ו CodeBehind כבר לא ממש רעה, רק שהבעיה היא שהם לא ממש מופרדים – הם למעשה מהווים ביחד מחלקה אחת, ולכן שינויים באחד מהם לעיתים מאוד קרובות "ישברו" את השני. (ה Coupling כאן גבוה, ואת זה נרצה לשנות).
כל הרעיון מאחורי MVVM זה פשוט לקחת את הCodeBehind ולהוציא אותו למחלקה נוספת, שנקרא לה ViewModel, וכן תהייה לנו הפרדה חזקה.ה View יהיה הXAML, והלוגיקה תשב במחלקה נפרדת לחלוטין.
בנוסף, נקבע שאסור לView להכיר את הViewModel, ואסור לViewModel להכיר את הView. זאת אומרת שלא תהייה לנו אף פעם גישה מאחד לשני בצורה ישירה, וכך ההפרדה תשאר חזקה – כך שינויים בשכבה אחת לא ישברו את השכבה השניה אף פעם!
הבעיה היחידה היא כמובן איך מתבצעת שליטה של שכבת הלוגיקה (ה ViewModel) על שכבת התצוגה (ה View) אם הן שתי מחלקות נפרדות, ש"לא מכירות" אחת את השניה? כאן נכנסים שני פיצ'רים מאוד חזקים של WPF ו Silverlight – Binding – שעביר מידע בין הViewModel לבין הView, ו Commands, שיעבירו פקודות מהView לViewModel. זה הרבה יותר פשוט ממה שזה נשמע.
בשביל שהמחלקות יכירו אחת את השניה בצורה "חלשה", נקבע את מחלקת הViewModel להיות הDataContext של מחלקת הView. התקשורת בין שתי המחלקות תעבור לפיכך, ע"י שימוש בBinding וCommands.
אז תכלס, איך מממשים את זה?
כדוגמא ניקח את המסך הבא, שמראה כפתור ו ListBox. בלחיצה על הכפתור, ה ListBox יראה לנו רשימה של מוצרים:
Read more: Lego for grownups