How to load templates with Hogan.JS from an external file?
I use Hogan.JS as JavaScript templating library. It is supposed to load JavaScript templates from external files. One can probably outsource several templates in an external JavaScript file.
Does anyone know how to do that?
I have the following code sample:
<!DOCTYPE html>
<html>
<head>
<title>Hogan.JS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/hogan-2.0.0.min.js"></script>
<script id="scriptTemplate" type="text/mustache">
<p>Your text here: {{text}}</p>
</script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
var template = $('#scriptTemplate').html();
var compiledTemplate = Hogan.compile(template);
var renderedTemplate = compiledTemplate.render(data);
var box = document.createElement('div');
box.innerHTML = renderedTemplate;
document.body.insertBefore(box,document.body.childNodes[0]);
</script>
</body>
</html>
With the IDs I can address the templates but I always need a separate inline script. :-(
How does this work with external files?
Answer
You have two options to load external templates:
- Pre-compiling the templates (the best feature of Hogan.js IMHO) or
- Using require.js's text plugin to load the template string
Unfortunately, the documentation for pre-compiling Hogan.js templates is non-existent. If you have a copy of the Github repo then inside the bin directory is a script called hulk that will do the job. It requires nodejs along with some npm modules (i.e. nopt and mkdirp) installed.
Once you have nodejs and those modules installed, given a template file Test.hogan:
<p>Your text here: {{text}}</p>
You can pre-compile the script using the following command:
hulk Test.hogan
Resulting in the following text:
if (!!!templates) var templates = {};
templates["Test"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<p>Your text here: ");t.b(t.v(t.f("text",c,p,0)));t.b("</p>");return t.fl(); },partials: {}, subs: { }});
Save this to a file called templates.js
Now in your HTML page, you would load that templates.js file and it creates a global object called templates where the compiled template function is in key "Test". You can also leave out the hogan.js file since that is the compiler (and your templates are now pre-compiled) and just include the template.js file that comes in the distribution.
<!DOCTYPE html>
<html>
<head>
<title>Hogan.JS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/template.js"></script>
<script src="js/templates.js"></script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
var compiledTemplate = templates['Test'];
var renderedTemplate = compiledTemplate.render(data);
var box = document.createElement('div');
box.innerHTML = renderedTemplate;
document.body.insertBefore(box,document.body.childNodes[0]);
</script>
</body>
</html>
Note: I did have some problems using the current master branch of the Github repo since it generated a template that uses a different constructor than the one used in the 2.0.0 template version. If you use hulk be sure to use the template.js file located in the lib folder.
Alternatively, you can use require.js and the text plugin. Download them and save them to your js folder. Then you'll need to add a require statement to load the template text:
<!DOCTYPE html>
<html>
<head>
<script src="js/hogan-2.0.0.js"></script>
<script src="js/require.js"></script>
</head>
<body>
<script>
var data = {
text: 'Hello World'
};
require(['js/text!Test.hogan'], function(testHoganText) {
// testHoganText contains the text of your template
var compiled = Hogan.compile(testHoganText);
var renderedTemplate = compiled.render(data);
var box = document.createElement('div');
box.innerHTML = renderedTemplate;
document.body.insertBefore(box,document.body.childNodes[0]);
});
</script>
</body>
</html>