Handlebars.java

Logic-less and semantic templates with Java

by Edgar Espina Theme by mattgraham

When Handlebars.js met Handlebars.java

In this section you will learn how to integrate Handlebars.js and Handlebars.java

Integration between the front-end and back-end can be done in one of two ways:

precompile helper

The precompilehelper takes a template and produce a JavaScriptfunction of the same template. Syntax is as follows:

{{precompile "template" [wrapper="anonymous, amd or none"]}}

Where template is the path to a template. The wrapper option convert the precompiled template to one of these patterns: "anonymous", "amd" or "none". Default is: "anonymous".

Given the template user.hbs:

Hello {{this}}!

It can be precompile in a home.hbs like:

<script type="text/javascript">
{{precompile "user"}}
</script>

The final page will looks like:

<script type="text/javascript">
(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['user'] = template(function (Handlebars,depth0,helpers,partials,data) {
  helpers = helpers || Handlebars.helpers;
  var buffer = "", functionType="function", escapeExpression=this.escapeExpression;


  buffer += "Hi ";
  depth0 = typeof depth0 === functionType ? depth0() : depth0;
  buffer += escapeExpression(depth0) + "!";
  return buffer;});
})();
</script>

If you're working with precompiled templates, you don't need to ship the compiler with your deployed application. Instead, you can use the smaller runtime build.

<script type="text/javascript" src="handlebars.runtime.js"></script>

In addition to reducing the download size, eliminating client-side compilation will significantly speed up boot time, as compilation is the most expensive part of Handlebars.js.

Later, you can access to the precompiled template by:

var template = Handlebars.templates['user']
var output = template(model);

embedded helper
The embedded helper let you include templates in a HTML page. Syntax is as follows:
```
{{embedded "template"}}
```
Where template is the path to a template.
Given row.hbs:
```
<tr>
  <td>{{firstName}}</td>
  <td>{{lastName}}</td>
</tr>
```
row.hbs can be embedded in home.hbs by:
```
<html>
  {{embedded "row"}}
</html>
```
The final output looks like:
```
<html>
<script id="row-hbs" type="text/x-handlebars">
<tr>
  <td>{{firstName}}</td>
  <td>{{lastName}}</td>
</tr>
</script>
</html>
```
Later, you can access to the domelement using the row-hbs id. Cool, isn't?

Conclusion

Handlebars.java has been designed and created especially for web development.

It give you the most widely use techinques for integrating the client and server without frustration and make the phrase: Only one template engine for the server and the browser a reality.

Want to contribute?

Fork the project on Github.
Create an issue or fix one from the issues list.
Share your ideas or ask questions on mailing list - don't hesitate to write a reply - that helps us improve javadocs/FAQ.
If you miss a particular feature - browse or ask on the mailing list - don't hesitate to write a reply, show us a sample code and describe the problem.
Write a blog post about how you use or extend Handlebars.java.
Please suggest changes to javadoc/exception messages when you find something unclear.
If you have problems with documentation, find it non intuitive or hard to follow - let us know about it, we'll try to make it better according to your suggestions. Any constructive critique is greatly appreciated. Don't forget that this is an open source project developed and documented in spare time.

Thank you, for reading the Handlebars.java blog.