Inmadusa.com [Part 2]: Precompile Handlebar templates to separate sections by file.

I chose handlebars for the template engine mainly because of its precompiler feature. The setup is that the markup for each section is kept on a separate file, at build time the templates are all precompiled and merged into a javascript file that is then loaded by the page.

For example, this is the folder structure:

To compile all the templates manually you can use:

>handlebars templates -o templates.js

With this file in place, I modified the router to load the appropriate template depending on the route:

Path.map('#/:lang/:section').to(function() {
   var section = this.params['section'];
   var lang = this.params['lang'];
 
   // TODO: get the resources for the language.
   
   // build the proper HTML for the route.
   var sectionHtml = Handlebars.templates[section]();
 
   // load the content into the DOM.
   $('.sectionContent').html(sectionHtml);
});

In a subsequent post I'll go over how to automate the template generation using a gulp task. In the mean time, you can visit the live site or check the source code.