31

I'm using handlebars.js and I want to start precompiling everything, but I can't seem to find a way to precompile the partials. The majority of my templates are actually partials. I tried just treating my them like regular templates, but then calling them as a partial doesn't work.

Is there any way to precompile partials, or, alternatively, call one template from within another template?

7 Answers 7

56

I found an even better method: precompile all your partials as templates, then right before you use them in your code, add this line:

Handlebars.partials = Handlebars.templates;

The improvements are 1) it's shorter and 2) it doesn't loose any custom helpers you might pass in when calling the parent template.

5
  • 2
    This is awesome! What's the secret behind it? why this is not built into the Handlebars? Thanks anyway :)))))
    – 尤川豪
    Jul 2, 2014 at 7:18
  • 1
    The secret is that there isn't really any difference between a partial and a template ;) Jul 30, 2014 at 17:08
  • Do you still call the partials within your templates with the normal partial syntax using this method?
    – am80l
    Oct 22, 2014 at 5:44
  • Yes, standard syntax: {{> partialName}}, or at least that's what we did at the time. (I no longer work at the company where I implemented this, and I haven't used handlebars templates recently. But that answer is probably still true.) Oct 22, 2014 at 13:27
  • 1
    Fantastic, a workaround for precompiling handlebars templates for unit testing, will link from github.com/hanachin/karma-handlebars-preprocessor/issues/2
    – monkeyboy
    May 19, 2015 at 11:54
6

As mentioned here on GitHub, there has been a -p flag added to the Handlebars CLI.

So you can use handlebars my_partial.handlebars -p -f output.js

5

Still not sure about precompiling partials, but this is how to call one template from within another template with help from this question: Handlebars helper for template composition

// instead of {{> partialName}} use {{partial "templateName"}}
Handlebars.registerHelper('partial', function(templateName,context){
    return new Handlebars.SafeString(Handlebars.templates[templateName](this));
});

http://jsfiddle.net/EBt8R/

5

I am using HandleBars v3.0.3 and I have partial and not partial templates pre-compiled in one file.

This thread is little bit confusing so I am summarizing the working solution.

  • Don't use -p operator while pre-compiling.
  • Don't register partial template by Handlebars.registerPartial('myPartial', '{{name}}');
  • use Nathan's suggestion of mapping partial object to templates object by Handlebars.partials = Handlebars.templates;
  • Refer partial template by name {{> name}}
0

I managed to get it working by pre compiling all my partials as templates and then adapting Nathans solution

// instead of {{> partialName}} use {{partial "templateName"}}
Handlebars.registerHelper('partial', function (templateName) {
    return new Handlebars.SafeString(JST[templateName](this));
});

So for me Handlebars.templates became JST when i compiled things, i noticed it in my compiled templates file.

0
for(let [name, template] of Object.entries(handlebars.partials)) {
    handlebars.partials[name] = handlebars.compile(template);
}
0

Instead of replacing all the registered partials I recommend instead explicitly adding the partials, possibly filtering them as well such as:

Object.entries(Handlebars.templates).forEach(([k, v]) => { if ( k.indexOf('partial') != -1 ) Handlebars.partials[k] = v })

In this case we only insert precompiled templates that contain "partial" in the name. This would allow you to either store these in a partials/ subfolder or within the name such as some-partial.hbs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.