Question

91

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

rated 0 times [ 92] [ 1] / answers: 1 / hits: 60955 / 13 Years ago, wed, december 28, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

editha

Add To Favorites

Follow

Total Points: 564

Total Questions: 107

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

answered 13 Years ago kristinsonjab · Accepted Answer

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.