משימה שנייה עם (2) knockout

22 באוקטובר 2012

תגיות: , , , , , , , ,
אין תגובות

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

נגדיר את המשימה הבאה: דף שבו המשתמש יכול להכניס ID של משתמש, לקבל את השם והגיל, לעדכן אותם ולשלוח בחזרה לשרת.

הדף יראה כך:

image

 

נחשוב לרגע על קוד רגיל שהיינו כותבים.

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

(הקוד כאן משתמש בקבצי ה – JS של knockout ו – jQuery)

בעזרת knockout נוכל לעבוד עם אובייקטים גם בצד הלקוח בלי צורך לגשת (כמעט) לאלמנטי UI.

קוד ה – html יראה כך:

 

<table>

    <tr>

        <td>User Id</td>

        <td><input type="text" data-bind="value: Id, event:{change: changeId}" /> </td>

    </tr>

    <tr>

        <td>Name</td>

        <td><input type="text" data-bind="value: Name" /></td>

    </tr>

     <tr>

        <td>Age</td>

        <td><input type="text" data-bind="value: Age" /></td>

    </tr>

    <tr>

        <td colspan="2">

            <input type="button" value="Update" data-bind="click: updateCliked" />

        </td>

    </tr>

</table>

 

נעבור על הקוד:

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

בשני תיבות הטקסט אנחנו מקשרים בין המאפיין value (שזה מה שהמשתמש רואה/מקליד) לבין המאפיין המתאים באובייקט.

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

למעשה (ונראה בהמשך) המאפיינים Name, Id, Age הם לא מאפיינים אלא למעשה פונקציות, וכשאנחנו מחברים אותם ללא הסוגרים, אנחנו למעשה נותנים סוג של delegate שאחראי על השדה.

בשורה האחרונה אנחנו רואים קישור בין אירוע click לבין מתודה בשם updateClicked, אותו דבר יש בשורה הראשונה (רק ששם מדובר על אירוע שאין לו binding מיוחד כמו click – ולכן יש את השימוש במילה events.

 

כעת נראה את קוד צד הלקוח.

var viewModel =

{

    Id: ko.observable(),

    Name: ko.observable("),

    Age: ko.observable(),

 

    changeId: function () {

        $.getJSON('GetPerson?id=' + viewModel.Id(), function (res) {

            viewModel.Name(res.Name);

            viewModel.Age(res.Age);

        });

    },

 

    updateCliked: function () {

        $.ajax('Update', {

            contentType: 'application/json',

            data: ko.toJSON(viewModel),

            dataType: 'json',

            type: 'post'

        });

    }

};

להסבר נוסף על אובייקטים ב – javascript

הקוד שראינו מגדיר אובייקט java script, שמכיל שלושה פונקציות (שהשמות שלהם הם בדיוק כמו השמות של האובייקט בצד השרת)

public class Person

{

    public int Id { get; set; }

    public string Name { get; set; }

    public float Age { get; set; }

}

הפונקציה ko.observable מגיעה כמובן מספריית knockout, והוא יוצר observable (משקיף), והוא למעשה מתחבר לאותו אלמנט שמקושר לפונקציה זו, כך שברגע שהאלמנט משתנה גם הערך הפנימי (בתוך הפונקציה) משתנה, וכן ההפך.

בנוסף יש את הפונקציה changeId שפונה ב – ajax לשרת, ושולחת כפרמטר את הערך שיש ב – Id (שימו לב שאני קורא את הערך בעזרת הסוגריים)

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

בזמן לחיצה על הלחצן update, נפנה ב – ajax לשרת כשנשלח את המידע שיש באובייקט בעזרת המרה שלו ל – JSON תוך שימוש בפונקציה המיוחדת של knockout בשם toJSON שמקבלת כפרמטר את ה – ViewModel.

כל מה שנשאר הוא להוסיף את הקוד הבא:

$(document).ready(function () {

    ko.applyBindings(viewModel);

});

הקוד הזה יבצע בפועל את פעולת ה – binding בין אובייקט ה – JS לבין ה – UI.

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

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

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