devstory

Utiliser Thymeleaf th:object et syntaxe Asterisk *{ }

  1. th:object et syntaxe Asterisk
  2. Spring Boot Form

1. th:object et syntaxe Asterisk

Dans Thymeleaf, une expression variable a une syntaxe ${ }. De plus, *{ } est aussi une expression variable utilisée assez souvent. Dans cette leçon nous allons en apprendre plus à ce sujet.
La syntaxe de l'astérisque (Asterisk Syntax) évalue les expressions sur les objets sélectionnés plutôt que sur l'ensemble du contexte. Pour sélectionner un objet, utilisez l'attribut th:object. Voyons un exemple simple ci-dessous :
(Asterisk syntax)
<div th:object = "${person}" class="box">
  <p><b>Full Name:</b> <span th:utext="*{fullName}"></span></p>
  <p><b>Email:</b> <span th:utext="*{email}"></span></p>
</div>
C’est exactement l’équivalent de :
(Dollar syntax)
<div class="box">
  <p><b>Full Name:</b> <span th:utext="${person.fullName}"></span></p>
  <p><b>Email:</b> <span th:utext="${person.email}"></span></p>
</div>
Et bien sûr, vous pouvez mélanger la syntaxe de l'astérisque (Asterisk syntax) et la syntaxe dollar (Dollar syntax), par exemple :
(Mix syntax)
<div th:object = "${person}" class="box">
  <p><b>Full Name:</b> <span th:utext="*{fullName}"></span></p>
  <p><b>Email:</b> <span th:utext="${person.email}"></span></p>
</div>
Que se passe-t-il lorsque vous ne sélectionnez aucun objet, mais utilisez la syntaxe de l'astérisque *{ }, auquel cas ${ } et *{ } fonctionnent de la même manière.
<div class="box">
  <p><b>Full Name:</b> <span th:utext="*{person.fullName}"></span></p>
  <p><b>Email:</b> <span th:utext="*{person.email}"></span></p>
</div>
<!--/* Same as: */-->
<div class="box">
  <p><b>Full Name:</b> <span th:utext="${person.fullName}"></span></p>
  <p><b>Email:</b> <span th:utext="${person.email}"></span></p>
</div>

2. Spring Boot Form

Dans Spring Boot, lorsque vous manipulez Form, vous rencontrez très souvent la syntaxe de l'astérisque (Asterisk Syntax) :
(Form)
<form th:action="@{/register}" th:object="${appUserForm}" method="POST">
    User Name:
    <input type="text" th:field="*{userName}" />
    <br/> Password:
    <input type="password" th:field="*{password}" />
    <br/> Confirm:
    <input type="password" th:field="*{confirmPassword}" />
    <br/> Email:
    <input type="text" th:field="*{email}" />
    <br/>
    <input type="submit" value="Submit" />
</form>
Voir plus :

Articles les plus récents

Show More