recursive.codes


The Personal Blog of Todd Sharp

Thymeleaf - Passing Variables From Child To Layout

Posted By: Todd Sharp on 4/6/2017 8:53 GMT
Tagged: Groovy, Spark Java, Thymeleaf

Just a quick update after my last post to clarify things a bit.  I mentioned in that post my dismay regarding the inability to pass model variables from the child view to the parent layout - and I shared that concern with the dialect developer Emanuel on GitHub.  He quickly wrote back to clarify that it is indeed possible:

Hi Todd! First of all, nice blog - I came across it the other day when you wrote about using Thymeleaf w/ Spark 

Anyway, as for passing values from child templates up to their parent layouts, it's possible using Thymeleaf's th:with attribute processors on any element that's involved in the layout/decoration process, which would be anywhere layout:decorate or layout:fragment will be found. eg:

Child/content template:

<html layout:decorate="your-layout.html" th:with="greeting='Hello!'">

Parent/layout template:

<html>
  ...
  <p th:with="${greeting}"></p> <!-- You'll end up with "Hello!" in here -->

Now, I don't seem to have documented this anywhere, and as someone who takes some pride in writing good docs, I feel a little bad that I've missed this! I swear I used to have it somewhere because others have come to me whenever this feature is broken/missing or they couldn't get it to work.

Of course I had to quickly test this out back in my Spark Java application, so I went back to the thymeleaf-layout.html view and modified it to pass the menu variable from my model into the layout:

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{fragments/main}" th:with="nav=${menu}">
Here I'm declaring that in the parent layout there should be a variable called nav that contains the value of menu from my model.  Now in the layout file (main.html) I can reference the nav variable to create my menu:

<ul class="nav navbar-nav">
    <li th:each="i : ${nav}"><a th:href="@{${i.route}}"><span th:text="${i.title}"></span></a></li>
</ul>

And I'm in business!  It's great to see an open source developer so responsive and concerned with proper documentation.  Thymeleaf definitely has potential.

Image by Larisa-K from Pixabay



Related Posts

Simulating Texas Hold'em With Groovy

Simulating Texas Hold'em With Groovy

Last week I had a bit of free time and decided to see how difficult it would be to write a Texas Hold'em poker simulation in Groovy.  My goal wasn't...

Intro To Oracle Application Container Cloud Services

Intro To Oracle Application Container Cloud Services

I've long been an AWS user, but recently one of my projects at work has expressed some interest in getting our platform running on multiple cloud service...

Creating A Slack Clone With Twilio, Angular 5 And Electron

Creating A Slack Clone With Twilio, Angular 5 And Electron

I've heard plenty about Twilio over the past few years and had always wanted to learn more about their APIs.  They have a ton of different products...

Note: Comments are currently closed on this blog. Disqus is simply too bloated to justify its use with the low volume of comments on this blog. Please visit my contact page if you have something to say!