Mustache

You can use Mustache templates in order to make your HTML more readable. Out-of-box, there is two ways which Kikaha allows developers to use Mustache: serving static templates or defining custom routes that renders mustache templates. Kikaha provides these features as a tiny layer above the JMustache library. To enable this feature on your project include the following dependency on your project:

<dependency>
  <groupId>io.skullabs.kikaha</groupId>
  <!-- formelly named kikaha-urouting-mustache on earlier versions -->
  <artifactId>kikaha-mustache</artifactId>
</dependency>

Serving static Mustache templates

Most of Single Page Applications (SPA) uses a single HTML page to render the entire application at the browser. Its possible to use Mustache to make the HTML file more readable. Static Mustache templates was designed to SPA, it does not take parameters (by default) but, allows developers to split its templates into small templates and include them as partials.

By default, templates should be placed at the webapp folder. Any template that ends with .mustache extension will be automatically available with the same name, but with a new extension .do. For exemple, if you have a template named login.mustache placed at the views/auth folder (relative to the webapp directory), it will be automatically available as http://localhost:9000/views/auth/login.do.

Setting attributes on Mustache templates

Static mustache templates does not allows developers to set up attributes or values into the templates (except partials). To send attributes you have to create a route that set this programmatically.

import kikaha.mustache.*;
import kikaha.urouting.api.*;
import javax.inject.*;
import java.util.*;
import lombok.*;

@Singleton
@Path( "profiles/detail" )
public class ProfileDetailResource {
  
  @GET
  @Path( "one" )
  @Produces( Mimes.HTML )
  public MustacheTemplate renderProfileTemplate1() {
    return new MustacheTemplate()
      .templateName( "profile-details.mustache" )
      .paramObject( new ProfileDetails( "World" ) );
  }
  
  @GET
  @Path( "two" )
  public Response renderProfileTemplate2(){
    return MustacheResponse.ok()
      .templateName( "profile-details.mustache" )
      .header("Name","World")
      .paramObject( new ProfileDetails( "World" ) );
  }
}

@Value
public class ProfileDetails {
  final String name;
}

<html>
  <body>
    <h1>Hello,{{name}}!</h1>
  </body>
</html>

At the above example there is two endpoints that renders a Mustache Template. Both performs the same task, and renders the same content. But, in a closer look its easy to identify that they have different designs and solves different needs.

The first endpoint, available at http://localhost:9000/profiles/detail/one, we will have the template profiles-details.mustache rendered, and the object ProfileDetailes will hold all parameters that the template needs to be rendered (attribute name, in this case).

The second approach, available at http://localhost:9000/profiles/detail/two, we will have a more flexible design. Similar to any kikaha.urouting.api.Response, the kikaha.mustache.MustacheResponse will allow developer to define custom HTTP Headers, Cookies and Status Code.

In both cases, templateName method defines which template will be rendered, and paramObject will hold the object that stores any value needed by the template. It could be any type that JMustache supports. You can see a detailed overview of which types could be rendered here.