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

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.

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.

Here is the way I do it:

Preparation

We will just assume all your template variables are in a variable called context:

var context = {    name: "Test Person",    ...};

Where to put your templates

Create a directory containing all your templates (we'll call it templates/)Add your templates here, called filename.handlebars.

Your directory structure:

.└── templates    ├── another_template.handlebars    └── my_template.handelbars

Compiling your templates

First go to your root directory, then compile your templates with the npm CLI program:

handlebars templates/*.handlebars -f compiled.js

New directory structure:

.├── compiled.js└── templates    ├── another_template.handlebars    └── my_template.handlebars

Usage

Include the compiled.js in your HTML page after you include the runtime:

<script src="handlebars.runtime.js"></script><script src="compiled.js"></script>

Render your templates using the global Handlebars object:

// If you used JavaScript object property conform file names// Original filename: "my_template.handlebars"Handlebars.templates.my_template(context)// if you used special characters which are not allowed in JavaScript properties// Original filename: "my-template.handlebars"Handlebars.templates["my-template"](context)

Remarks

Note the file extension .handlebars. It is automatically stripped when compiling the templates.

Extra: if you use one of the Jetbrains IDEs together with the Handlebars/Mustache plugin you even get quite a good editor support.