עבודה עם Select ו- Option ב- Thymeleaf
1. סקירה כללית
Thymeleaf הוא מנוע התבניות הפופולרי ביותר המצורף יחד עם Spring Boot. פרסמנו כבר מספר מאמרים בנושא, ואנחנו ממליצים בחום לעבור על הסדרה Thymeleaf של Baeldung.
במדריך זה נבחן כיצד לעבוד איתו בחר ו אוֹפְּצִיָה תגים ב- Thymeleaf.
2. יסודות HTML
ב- HTML נוכל לבנות רשימה נפתחת עם מספר ערכים:
אגס תפוז בננה תפוח כל רשימה מורכבת מ בחר ומקונן אוֹפְּצִיָה תגים. כברירת מחדל, דפדפן האינטרנט יציג רשימה עם האפשרות הראשונה שנבחרה מראש.
אנו יכולים לקבוע איזה ערך נבחר באמצעות נבחר תְכוּנָה:
תפוזיתר על כן, אנו יכולים לציין כי לא ניתן לבחור אפשרות באמצעות נָכֶה תְכוּנָה:
בבקשה תבחר...3. טימליף
ב- Thymleaf נוכל להשתמש th: שדה תכונה לאיחוד התצוגה עם המודל:
בעוד שהדוגמא שלעיל לא ממש מצריכה שימוש במנוע תבנית, בדוגמאות מתקדמות יותר לעקוב נראה את העוצמה של Thymeleaf.
3.1. אוֹפְּצִיָה ללא סלקציה
אם אנו חושבים על תרחיש בו יש יותר אפשרויות לבחירה, דרך נקייה ומסודרת להציג את כולן היא באמצעות ה: כל אחד תכונה יחד עם th: ערך ו th: טקסט:
בדוגמה שלעיל אנו משתמשים ברצף מספרים בין 0 ל 100. אנו מקצים את הערך של כל מספר אני ל אוֹפְּצִיָה תגיות ערך המאפיין, ואנחנו משתמשים באותו מספר כמו הערך המוצג.
קוד Thymeleaf יוצג בדפדפן כ:
0 1 2 ... 100 בואו נחשוב על הדוגמה הזו כ לִיצוֹר, כלומר, אנו מתחילים עם צורה חדשה, ואת לא היה צורך לבחור בערך האחוזים.
3.2. נבחר אוֹפְּצִיָה
אם אנחנו רוצים להרחיב את הטופס שלנו עכשיו עם עדכון פונקציונליותכלומר, אנו חוזרים לרשומה שנוצרה בעבר, ואנו רוצים לאכלס את הטופס בנתונים קיימים צריך לבחור את האפשרות.
אנו יכולים להשיג זאת על ידי הוספה ה: נבחר תכונה יחד עם מצב כלשהו:
בדוגמה שלעיל, אנו רוצים לבחור את הערך 75 מראש על ידי בדיקת אם אני שווה ל 75.
למרות זאת, הקוד הזה לא יעבוד, וה- HTML המוצג יהיה:
0 ... 74 75 76 ... 100 כדי לתקן את זה, עלינו להסיר th: שדה והחליפו ב שֵׁם ו תְעוּדַת זֶהוּת תכונות:
בסופו של דבר נקבל:
0 ... 74 75 76 ... 100 4. מסקנה
במאמר קצר זה בדקנו כיצד לעבוד עם בוחרים נפתחים / רשימות ב- Thymeleaf. יש מלכודת נפוצה אחת עם ערכים שנבחרו מראש, אשר הראינו להם את הפיתרון.
כמו תמיד, את הקוד ששימש במהלך הדיון ניתן למצוא באתר GitHub.
