A Qute template combines HTML with expressions that are filled when a REST method renders it. For an interactive reservation page, keep the main page and its replaceable tables in separate templates: index.html, listofreservations.html, and availablecars.html. HTMX requests the table fragments and inserts their HTML into the page without custom JavaScript. section 6.2.3
To serve a template:
- Declare its inputs, such as a user name, dates, or a collection of cars. section 6.2.3
- Use expressions such as {name} for values and {#for car in cars} to produce table rows. section 6.2.3
- Return a TemplateInstance from a REST method; @CheckedTemplate methods provide typed arguments for each template. section 6.2.3
Listing 6.12 Template for the table of available cars
{@org.acme.users.model.Car[] cars} #1
{@java.time.LocalDate startDate}
{@java.time.LocalDate endDate}
<div id="carlist">
<table>
<thead>
<tr>
<th>Car ID</th>
<th>Plate number</th>
<th>Manufacturer</th>
<th>Model</th>
<th>Reservation</th>
</tr>
</thead>
{#for car in cars} #2
<tr>
<td>{car.id}</td>
<td>{car.licensePlateNumber}</td>
<td>{car.manufacturer}</td>
<td>{car.model}</td>
<td>
<form hx-target="#reservations" #3
hx-post="/reserve">
<input type="hidden" name="startDate" value="{startDate}"/>
<input type="hidden" name="endDate" value="{endDate}"/>
<input type="hidden" name="carId" value="{car.id}"/>
<input type="submit" value="Reserve"/>
</form>
</td>
</tr>
{/for}
</table>
</div>
The available-cars fragment shows typed inputs, a loop over cars, and an HTMX reservation form in one template. section 6.2.3
