נוק אאוט עם Knockout.js

ספריה חמודה שמקצרת הרבה עבודה שחורה בחיבור בין הUI ל JS היא Knockout.js.

בשתי מילים מה היא עושה?
יש לנו בדף המון אלמנטים, במקום שכל פעם ניגש אליהם דרך getelementbyid פשוט נגדיר להם בתוך תגית HTML שם ע"י האלמנט data-bind, בטעינת הדף נטען את כל האלמנטים לתוך הDOM וככה נוכל בקלות לגשת, לשנות, לשלוח, למחוק.

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

היופי של Knockout.js שהיא מייעלת הרבה עבודה, לדו':
יש לנו טופס, שכל השדות שלו מוגדרים בdata-bind, הספרייה תוכל לעשות גם ולידציה של כל הנתונים בשורת קוד אחת (ע"י ספרייה נוספת בשם knockout.validation.min), וגם שליחה לשרת את כל הנתונים בשורה שנייה.
 
איך מתקדמים?
א. יש כמה פוסטים נהדרים של הרב דוטנט.
חשוב מאוד. זה לא מודגש בכל הפוסטים שלו (כי זה דבר מאוד הגיוני, אבל...) כשיוצרים את האובייקט שמכיל את כל האלמנטים בדף, צריך לצרף את האובייקט עצמו ע"י הפקודה  ko.applyBindings בעת טעינת הדף. ככה:

 

$(document).ready(function () {

    ko.applyBindings(viewModel);

});

 

ב. דוגמאות מגניבות באתר של Knockout.js

וכמו תמיד יש לי רצון עז לכתוב על זה המון פוסטים. בדיוק כפי שרציתי לכתוב המון על JS ועל C# ולא הצלחתי...