Using pre-compiled templates with Handlebars.js (jQuery Mobile environment)

I am struggling somewhat with pre-compilation of templates in Handlebars. My jQuery Mobile project is getting pretty big template-wise and I wish to pre-compile the templates I use.

However I can't seem to find a good explanation (like a step by step tutorial) of how to do this with Handlebars.

I still have my templates all inline using the script tags. I have handlebars installed using NPM. But now I am kinda lost in how to proceed.

I am guessing doing something like

handlebars -s event.handlebars > event.compiled

and somehow including the event.compiled contents? But then, how to call it.

I am calling my templates like so

var source = $('#tmpl_profile').html(),
template = Handlebars.compile(source),
context = user.profile()),
html    = template(context);

Hope someone can shed some light on this for me.

Solution 1:

So after much trial and error (which is the best way to learn it) here's the way that works for me.

First- externalize all your templates, say you have a template inside script tags like

<script id="tmpl_ownevents" type="text/templates">
    {{#unless event}}
        <div class="notfoundevents"><p>No events for you</p></div>    
    {{/unless}}
</script>

Create a new file called events.tmpl and copy/paste the template into that. Be sure to remove the script elements themselves, this gotcha bit me in the a..

Install the Handlebars commandline script like so

npm install -g handlebars

go to the folder you have saved events.tmpl into and run

handlebars events.tmpl -f events.tmpl.js

Include the compiled javascript into your HTML after you included Handlebars.js

<script src="events.tmpl.js"></script>

Now all that is left is change your normal template code into something resembling the following

var template = Handlebars.templates['events.tmpl'], // your template minus the .js
    context = events.all(), // your data
    html    = template(context);

And there you have it, super fast pre-compiled Handlebars templates.

Solution 2:

Another great option for this is to use GruntJS. Once installed:

npm install grunt-contrib-handlebars --save-dev

Then inside your gruntfile.js

grunt.initConfig({
    dirs: {
      handlebars: 'app/handlebars'
    },
    watch: {
      handlebars: {
        files: ['<%= handlebars.compile.src %>'],
        tasks: ['handlebars:compile']
      }
    },
    handlebars: {
      compile: {
        src: '<%= dirs.handlebars %>/*.handlebars',
        dest: '<%= dirs.handlebars %>/handlebars-templates.js'
      }
    }
});


grunt.loadNpmTasks('grunt-contrib-handlebars');

Then you simply type grunt watch from your console, and grunt will automatically compile all *.handlebars files into your handlebars-templates.js file.

Really rad way to work with handlebars.