Correct the task anchor so that it displays the proper task (given by task.description)

Question

I re-watched the video dozens and dozens of times:

https://teamtreehouse.com/library/spring-basics/using-the-mvc-architecture/code-two-more-thymeleaf-templates

Time index 2:50 seems most applicable where they have this code:

<div class="categories container">
    <div class="row">
        <!--
            Repeat the div element for each object in the 'categories'
            collection of the model map. Each object in the loop
            should be named 'category'
        -->
        <div th:each="category : ${categories}" class="col s12 l4">
            <div class="card">
                <div class="card-content">
                    <div class="card-title">
                        <!--
                            Set the href attribute of the a tag to be the URI to
                            a specific category according to the category's id.
                            For example, /category/1 or /category/2

                            Then, set the text between the a tags to be the category name,
                            coming from the 'name' field of the 'category' object
                            in the model map
                        -->
                        <a th:href="@{'/category/' + ${category.id}}" th:text="${category.name}">Category Name</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

..which corresponds roughly to the line below that has 'th:text=":

src/main/resources/templates/index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8"/>
    <meta description="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" th:href="@{/app.css}"/>

    <title>Task Manager</title>
  </head>
  <body>
    <h1>My Tasks</h1>
    <ul>
      <li th:each="task : ${tasks}">
        <a href="@{'/tasks/' + ${task.id}}" th:text="task.description">Task Description</a>
      </li>
    </ul>
  </body>
</html>

The only trouble is they are using li tags instead of div tags

and the challeneg code is using 'th:each'

while the code in the video (and the zip download for the course) does not.

That subtle different is enough to throw me off..

The only clue/hint:

"Bummer! Thymeleaf doesn't know that it should process anything in the href attribute. Is there something you're forgetting?"

So, I'll just post this forum thread for the final challenge of the course

and hope that someone else was confused about this fix challenge as me.

I thoroughly do not understand Thymeleaf templating...

A little bit latter I was studying the 'category.html' file in the zip download and saw this line:

<a th:href="@{'/gif/' + ${gif.name}}">

...so I tried:

      <li th:each="task : ${tasks}">
        <a th:href="@{'/tasks/' + ${task.id}}" th:text="task.description">Task Description</a>
      </li>

This gave me a different error:

"Bummer! Your th:text attribute value isn't correct. Be sure to use the correct symbols when inputting a variable expression with Thymeleaf."

Am I making progress? --who knows..

Several hours later...

  <li th:each="task : ${tasks}">
    <a th:href="@{'/tasks/' + ${task.id}}" th:text="${task.description}">Task Description</a>
  </li>

Could a dollar sign and some curly brackets really make that much of a difference..?

Turns out it could!

Khoff Khak Khak!!

(that's me trying to cough up the throat gagging hairball that is Thymeleaf templating...)

Answer 1 · 2021-05-21T14:57:58Z

May 21, 2021 2:57pm

Thanks for this. Ironically, the wording of the question here tripped me up, I ended up changing something I didn't even need to!

Welcome to the Treehouse Community

Looking to learn something new?

james white

james white

Correct the task anchor so that it displays the proper task (given by task.description)

Sagar Thakkar

Sagar Thakkar

Alastair Herd

Alastair Herd

1 Answer

Mary McCallum

Mary McCallum