Search code examples
mustachehandlebars.js

mustache {{{partial}}} vs {{> partial}}

I have a handlebars/mustache layout file in my node.js application that looks like this:

{{> header}}
{{> navbar}}
{{{body}}}
{{> footer-user}}
{{> footer}}

Since all five lines are includes, is there any difference between the two types of includes? Could I replace {{{body}}} with {{>body}} or {{> header}} with {{{header}}}? They both appear not to escape the html that gets included. What's the best practice?

Solution

  • The syntax {{> name}} is for partials, i.e. to include another template:

    Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that may be called directly by other templates.

    whereas {{{name}}} is for including data without escaping it. If you wanted the data to be escaped, you'd use {{name}}:

    Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.

    So they are different things.

    {{{body}}} refers to a body property in the current context provided by your application (alternatively it could refer to a helper function but that's not the case here).

    If you had {{>body}} in the code, it would mean you have a template named body that you want handlebars to load.

    Note that, if you use Handlebars proper, all partials need to be registered by calling Handlebars.registerPartial (if your project uses express-handlebars, it does it all for you so you won't find this in the code).

    Handlebars's documentation can be found at handlebarsjs.com.