Handlebars: Overriding Global Partials

The HandlebarsJS API let's you register partial templates — templates that get rendered within the context of a larger template — in a global scope. These partials are available to all other templates. For example, if there's a section of markup repeated throughout many of your templates, rather than repeat yourself, you could compose a partial template. You would then make this available to all other templates by using the registerPartial() function. This helps simplify larger templates too, by breaking them down into smaller, more manageable parts. However, if you're using the same global partial in all your templates, you're probably going to run into a situation where you need to swap the default partial for something more specific. Let's say one of your pages requires a custom header partial. We can pass in a custom partial that's used in that context only.

Here's a demonstration that does just that. There's a main template that's composed of partial templates — header, body, and footer. When you click the link, we re-render the template, passing in a custom partial. This will only override the header partial for this render call. The next time the main template is rendered, without any custom partials passed in, it'll use the global partial instead.

$body.html( TemplateMain( context, { 
    partials: { header: TemplateHeaderCustom } 
}));