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:
The precompile
helper takes a template
and produce a JavaScript
function 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".
Hello {{this}}!
<script type="text/javascript">
{{precompile "user"}}
</script>
<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);
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.
<tr>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
</tr>
<html>
{{embedded "row"}}
</html>
<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 dom
element using the row-hbs
id. Cool, isn't?
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.
Thank you, for reading the Handlebars.java blog.