openplanning

Sử dụng Thymeleaf th:object và cú pháp asterisk *{ }

  1. th:object và cú pháp Asterisk
  2. Spring Boot Form

1. th:object và cú pháp Asterisk

Trong Thymeleaf một biểu thức biến (variable expression) có cú pháp ${ }. Ngoài ra *{ } cũng là một biểu thức biến được sử dụng khá thường xuyên, trong bài học này chúng ta sẽ tìm hiểu về nó.
Cú pháp dấu hoa thị (Asterisk Syntax) đánh giá các biểu thức trên các đối tượng được chọn hơn là trên toàn bộ bối cảnh. Để lựa chọn một đối tượng bạn sử dụng thuộc tính th:object. Xem một ví dụ đơn giản dưới đây:
(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>
Nó chính xác tương đương với:
(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>
Và tất nhiên bạn có thể trộn lẫn cú pháp dấu hoa thị (Asterisk syntax) và cú pháp dollar (Dollar syntax) với nhau, chẳng hạn:
(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>
Điều gì xẩy ra khi bạn không chọn một đối tượng nào, nhưng sử dụng cú pháp dấu hoa thị *{ }. Trong trường hợp này ${ } và *{ } hoạt động giống nhau.
<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

Trong Spring Boot, khi xử lý Form bạn rất thường xuyên gặp cú pháp dấu hoa thị (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>
Xem thêm:

Các bài viết mới nhất

Show More