עבודה עם מאפייני HTML מותאמים אישית ב- Thymeleaf
1. סקירה כללית
במדריך זה נבחן כיצד אנו יכולים להגדיר תכונות מותאמות אישית בתגי HTML5 באמצעות Thymeleaf. זוהי מסגרת מנוע תבנית המאפשרת להשתמש ב- HTML רגיל להצגת נתונים דינמיים.
למאמר היכרות בנושא Thymeleaf או שילובו עם Spring עיין בקישור זה.
2. מאפיינים מותאמים אישית ב- HTML5
לפעמים אנו עשויים לדרוש מידע נוסף בדפי HTML בכדי לבצע עיבוד בצד הלקוח. לדוגמה, ייתכן שנרצה לשמור נתונים נוספים ב- טופסקֶלֶט תגים כדי שנוכל להשתמש בהם בזמן הגשת הטופס באמצעות AJAX.
כמו כן, ייתכן שנרצה להציג הודעות שגיאת אימות מותאמות אישית למשתמש שממלא טופס.
בכל מקרה, אנו יכולים לספק נתונים נוספים באמצעות תכונות מותאמות אישית של HTML 5. ניתן להגדיר מאפיינים מותאמים אישית בתג HTML באמצעות נתונים- קידומת.
עכשיו, בואו נראה כיצד נוכל להגדיר תכונות אלה באמצעות ניב ברירת המחדל ב- Thymeleaf.
3. מאפייני HTML מותאמים אישית ב- Thymeleaf
אנו יכולים לציין מאפיין מותאם אישית בתג HTML באמצעות התחביר:
th: data- = ""בואו ניצור טופס פשוט המאפשר לסטודנט להירשם לקורס כדי לראות דברים בפעולה:
טופס זה מכיל רשימה נפתחת אחת עם הקורסים הזמינים וכפתור הגשה.
נניח שאנחנו רוצים להציג הודעת שגיאה מותאמת אישית למשתמש אם הוא ילחץ על הגש מבלי לבחור קורס.
אנו יכולים לשמור את הודעת השגיאה כתכונה מותאמת אישית ב- בחר תייג וצור פונקציית JavaScript כדי לאמת את ערכה בהגשת הטופס.
המעודכן בחר תג נראה בערך כך:
הנה, אנו מביאים את הודעת השגיאה מחבורת המשאבים.
כעת, כאשר המשתמש מגיש את הטופס מבלי לבחור אפשרות חוקית, פונקציית JavaScript זו תציג למשתמש הודעת שגיאה:
פונקציה validateForm () {var e = document.getElementById ("קורס"); ערך var = e.options [e.selectedIndex] .value; אם (value == '') {var error = document.getElementById ("errormesg"); error.textContent = e.getAttribute ('הודעת אימות נתונים'); להחזיר כוזב; } להחזיר נכון; }באופן דומה, אנו יכולים להוסיף מספר תכונות מותאמות אישית לתגי HTML על ידי הגדרה th: נתונים- * תכונה לכל אחד מהם.
3. מסקנה
במאמר מהיר זה, בדקנו כיצד אנו יכולים למנף את התמיכה של Thymeleaf להוסיף מאפיינים מותאמים אישית בתבניות HTML5.
כמו תמיד, גרסה עובדת של קוד זה זמינה ב- Github.
