Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Java

Chris Jones
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Jones
Java Web Development Techdegree Graduate 23,933 Points
Posted by Chris Jones
.a{fill-rule:evenodd;}techdegree seal-36
Chris Jones
Java Web Development Techdegree Graduate 23,933 Points

Feeding Data to our Thymeleaf Templates

I just finished the Feeding Data To Our ThymeLeaf Templates class in the Spring Basics course of the Java Web Development track.

Chris added th:src="@{'/gifs/' + ${gif.name} + '.gif'}" to the gif-details.html file so that the gif file that is displayed at /gif is dynamic based on the Gif object we create. I wanted to try displaying the username field of the Gif object, also. I changed line 60 of gif-details.html from the static text "Craig Dennis" to below:

BEFORE: <h4>Craig Dennis</h4>

AFTER: <h4>${gif.username}</h4>

However, this displays as literal text and does not run the Gif object's getUsername method to return the object's username field.

Am I doing something wrong? Here is the entire HTML file if that helps. Can I only add these Spring expressions to HTML tags and not text? If so, is there any way around this?

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

    <link rel="icon" th:href="@{/favicon.png}" />

    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" th:href="@{/app.css}" />

    <title th:text="'giflib | ' + ${gif.name}">giflib</title>
</head>
<body>
    <div class="navbar-fixed">
        <nav>
            <div class="container">
                <a th:href="@{/}" class="brand-logo">gif<span>.</span>lib</a>
                <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li class="active"><a th:href="@{/}">Explore</a></li>
                    <li><a th:href="@{/categories}">Categories</a></li>
                    <li><a th:href="@{/favorites}">Favorites</a></li>
                </ul>
                <ul id="mobile-nav" class="side-nav">
                    <li class="active"><a th:href="@{/}">Explore</a></li>
                    <li><a th:href="@{/categories}">Categories</a></li>
                    <li><a th:href="@{/favorites}">Favorites</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="search-bar container">
        <div class="row">
            <div class="col s12">
                <form action="#" method="get">
                    <div class="input-field">
                        <input name="q" type="search" placeholder="Search all gifs..." required="required" autocomplete="off"/>
                        <i class="material-icons">search</i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="gif-detail container">
        <div class="frame row">
            <div class="col s12">
                <img th:src="@{'/gifs/' + ${gif.name} + '.gif'}" alt="gif" />
                <a href="#" class="mark favorite"></a>
            </div>
        </div>
        <div class="row">
            <div class="col s12 l6">
                <div class="meta row">
                    <div class="col s3">
                        <img class="circle" src="http://api.adorable.io/avatars/205/avatar" alt="avatar" />
                    </div>
                    <div class="col s9">
                        <h4>${gif.username}</h4>
                        <p>Uploaded on Oct 30 2015</p>
                    </div>
                </div>
            </div>
            <div class="col s12 l6">
                <div class="share">
                    <a class="btn right" href="#">Copy</a>
                    <span>URL</span>
                </div>
            </div>
        </div>
    </div>

<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>
<script th:src="@{/vendor/materialize/js/materialize.js}"></script>
<script th:src="@{/app.js}"></script>
</body>
</html>

1 Answer