Now we can make edits to our Thymeleaf template and create input fields for people to write comments:
<td> <ul> <li th:each="comment : ${image.comments}" th:text="${comment.comment}"></li> </ul> </td> <td> <form th:method="post" th:action="@{'/comments'}"> <input name="comment" value="" type="text" /> <input name="imageId" th:value="${image.id}" type="hidden" /> <input type="submit" /> </form> </td>
The section of our preceding template where each row is rendered can be explained as follows:
- There is a new column containing an HTML unordered list to display each comment
- The unordered list consists of an HTML line item for each comment via Thymeleaf's th:each construct
- There is also a new column containing an HTML form ...