How to Generate Dynamic Content using Mustache Templates?

Mustache is a logicless template engine and it is helpful for creating dynamic content like HTML and configuration files. Logicless means it does not have a structured flow with if else/for loops/while loops etc., It just contains tag names surrounded by { { } } and hence they are called Mustache templates(that resembles a mustache). A model object is required which contains the data to be filled in the template. Let us see the functionality via a maven project. For that let us see the Maven dependency first.

Maven dependency:

Multiple languages can use Compilation and execution of the templates. Languages can be both on the client side and server side. Let us use a  Java library that can be added as a Maven dependency.

For Java 8:

<dependency>
    <groupId>com.github.spullara.mustache.java</groupId>
    <artifactId>compiler</artifactId>
    <version>0.9.4</version>
</dependency>

For Java 6/7:

<dependency>
    <groupId>com.github.spullara.mustache.java</groupId>
    <artifactId>compiler</artifactId>
    <version>0.8.18</version>
</dependency>

Example Project

Project Structure:

 

As it is a maven project. let us see pom.xml

pom.xml

Let us see how to create a Simple template

<h2>{{title}}</h2>
<small>Created on {{createdOn}}</small>
<p>{{text}}</p>

This template will be helpful to display the details that are present in TodoItems. ({{}}) is mainly helpful for getting 

1. Methods and Properties of a Java class
2. Keys of a Map object

For compiling the Mustache Template, we need to use MustacheFactory. Here in our program, it searches for the template that is present in classpath, and here it is available at src/main/resources. For compiling the template

MustacheFactory mustacheFactory = new DefaultMustacheFactory();
Mustache mustache = mustacheFactory.compile("todoitems.mustache");

Example of a template file

<div class="starter-template">
    {{#articles}}
    <h1>{{title}}</h1>
    <h3>{{publishDate}}</h3>
    <h3>{{author}}</h3>
    <p>{{body}}</p>
    {{/articles}}
</div>

Let us see a model file that produces the data

TodoItems.java

The compiled template which produces HTML is as follows

TodoItems todoItems = new TodoItems("Todo 1", "Description");
StringWriter writer = new StringWriter();
m.execute(writer, todoItems).flush();
String html = writer.toString();

Not only sequential data, but the list of data also, but it can also be supported via

{{#todo}}
<!-- Other code -->
{{/todo}}

The important thing that needs to be noted is the # and/or which represents the basis for rendering the section. As a spring project, the data rendering also happening. Hence let us see the key files to execute it

MustacheUtil.java

SpringMustacheApplication.java

GeekArticleController.java

GeekArticle.java

Let us see the resources folder html key files

geekarticle.html

index.html

todo.mustache

<h2>{{title}}</h2>
<small>Created on {{createdOn}}</small>
<p>{{text}}</p>

Let us run the application as a spring boot project. The console output is shown here

 

On execution of the controller, we can see the below output

 

For producing inverted sections, we need to follow the pattern below

{{#todos}}
<h2>{{title}}</h2>
{{/todos}}
{{^todos}}  // start with a caret (^) and end with a slash (/)
<p>No todos!</p>
{{/todos}}

Conclusion

In this article, we saw creating of simple or inverted mustache templates and then java API is used to compile and execute the mustache templates by providing relevant data. It is a logicless template and is supported by many languages like Java, Python, Ruby, Android, Kotlin, etc.