משימה ראשונה עם knockout

26 בספטמבר 2012

תגיות: , , , , ,
תגובה אחת

כדי לפתח היום אפליקציות web אנחנו חייבים להכיר ספרייה כמו knockout,

בקצרה – ספריה זו מאפשרת לעבוד עם מודל ה – binding בין אלמנטי ui לבין משתנים ואובייקטים בעמוד, ללא צורך לגשת מה – java script לאלמנטים.

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

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

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

<script src="knockout-2.0.0.js" type="text/javascript"></script>

לאחר מכן נכתוב את קוד ה – html הבא:

<span>clicks: </span><span data-bind="text: clickCount()"></span>

<input type="button" onclick="addClick()" value="Click" />

כפי שאפשר לראות ה – span השני מחבר בעזרת data-bind את המאפיין text של האלמנט למשתנה בשם clickCount. (הערת אגב – במידה ונכתוב את שם המשתנה ללא סוגריים מדובר על קישור דו כיווני, כלומר עם המשתמש ישנה את ה – ui האובייקט ישתנה מיידית – זה רלוונטי בתיבות טקסט וכדו’ – אולי בפוסטים אחרים)

כעת נראה את הפונקציה.

<script type="text/javascript">

 

    onload = function () {

        clickCount = ko.observable(0);

        ko.applyBindings(clickCount);

    }

 

    function addClick() {

        var clicks = clickCount();

        clicks++;

        clickCount(clicks);

    }

</script>

ראשית נגדיר משתנה בשם clickCount שיהפוך להיות אובייקט-משקיף של ko. ויקבל את הערץ ההתחלתי 0.

לאחר מכן נשתמש בפונקצית applayBinding כדי לבצע את הקישור בפועל (נשלח כפרמטר את האובייקט – שלמעשה זאת פונקציה)

 

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

בצורה אוטומטית ה – ui יתעדכן.

 

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

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

כתיבת תגובה

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

תגובה אחת

  1. יהודית29 בדצמבר 2014 ב 12:55

    לא הבנתי מהו KO

    הגב