streamalism.org

1. סקירה כללית

במדריך זה אנו נציג כיצד לגשת לאובייקטים של MVC באביב בתצוגות Thymeleaf המכילים קוד JavaScript. נשתמש באביב אתחול ובמנוע התבנית Thymeleaf בדוגמאות שלנו, אך הרעיון עובד גם עבור מנועי תבנית אחרים.

אנו מתארים שני מקרים: כאשר קוד JavaScript מוטמע או פנימי לדף האינטרנט שנוצר על ידי המנוע, וכאשר הוא חיצוני לדף - למשל, בקובץ JavaScript נפרד.

2. התקנה

נניח שכבר הגדרנו יישום אינטרנט של Spring Boot המשתמש במנוע התבנית של Thymeleaf. אחרת, ייתכן שתוכל למצוא הדרכות אלה שימושיות להתחיל:

• Bootstrap יישום פשוט - כיצד ליצור יישום Spring Boot מאפס
• אביב MVC + Thymeleaf 3.0: תכונות חדשות - כיצד להשתמש בתחביר של Thymeleaf

יתר על כן, נניח שליישום שלנו יש בקר המתאים לנקודת קצה /אינדקס שמציג תצוגה מתבנית בשם index.html. למשל, תבנית זו עשויה לכלול קוד JavaScript מוטבע או חיצוני script.js.

המטרה שלנו היא להיות מסוגלים לגשת לפרמטרים של Spring MVC מקוד JavaScript מוטבע או חיצוני (JS).

3. גש לפרמטרים

קודם כל, עלינו ליצור את משתני המודל בהם אנו רוצים להשתמש מקוד JS.

באביב MVC ישנן דרכים שונות לעשות זאת. בואו נשתמש ב- ModelAndView גִישָׁה:

@RequestMapping ("/ index") ModelAndView הציבורי thymeleafView (מודל מפה) {model.put ("number", 1234); model.put ("הודעה", "שלום מאביב MVC"); להחזיר ModelAndView חדש ("thymeleaf / index"); } 

אנו יכולים למצוא אפשרויות אחרות במדריך שלנו בנושא דֶגֶם, ModelMap, ו ModelView באביב MVC.

4. קוד JS מוטבע

קוד JS מוטבע אינו אלא חלק מה- index.html קובץ שנמצא בתוך ה- אֵלֵמֶנט. אנחנו יכולים להעביר שם משתני MVC באביב באופן די פשוט:

 var number = [[$ {number}]]; var message = "[[$ {message}]]"; 

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

 מספר var = 1234; var message = "שלום מ- MVC באביב!"; 

5. קוד JS חיצוני

נניח שקוד ה- JS החיצוני שלנו כלול ב- index.html קובץ באמצעות אותו תג, בו אנו מציינים את src תְכוּנָה:

עכשיו, אם אנחנו רוצים להשתמש בפרמטרים של MVC באביב מ script.js, אנחנו צריכים:

1. הגדר משתני JS בקוד JS מוטבע כפי שעשינו בסעיף הקודם
2. גישה למשתנים אלה מתוך script.js קוֹבֶץ

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

ניתן להשיג זאת בשתי דרכים: על ידי ציון סדר ביצוע קוד JS או על ידי שימוש בביצוע קוד JS אסינכרוני.

5.1. ציין את סדר הביצוע

אנו יכולים לעשות זאת על ידי הכרזת קוד ה- JS החיצוני לאחר קוד ההטמעה index.html:

 var number = [[$ {number}]]; var message = "[[$ {message}]]"; 

5.2. ביצוע קוד אסינכרוני

במקרה זה, הסדר בו אנו מצהירים על קוד JS חיצוני ומוטמע ב- index.html אין חשיבות, אך עלינו למקם את הקוד מ- script.js למעטפת טיפוסית העמוסה על הדף:

window.onload = פונקציה () {// קוד JS};

למרות הפשטות של קוד זה, הנוהג הנפוץ ביותר הוא השימוש jQuery במקום זאת. אנו כוללים ספרייה זו כראשונה אלמנט ב index.html קוֹבֶץ:

    ...  ... 

כעת, אנו עשויים למקם את קוד JS בתוך הדברים הבאים jQuery עֲטִיפָה:

$ (פונקציה () {// קוד JS});

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

6. קצת הסבר

באביב MVC, מנוע התבנית של Thymeleaf מנתח רק את קובץ התבנית (index.html במקרה שלנו) וממיר אותו לקובץ HTML. קובץ זה, מצידו, עשוי לכלול הפניות למשאבים אחרים שאינם מתחום מנוע התבנית. הדפדפן של המשתמש הוא שמנתח את המשאבים הללו ומעמיד את תצוגת ה- HTML.

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

7. מסקנה

במדריך זה למדנו כיצד לגשת לפרמטרים של Spring MVC בתוך קוד JavaScript.

כמו תמיד, דוגמאות הקוד המלאות נמצאות במאגר GitHub שלנו.