Partials
Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that may be called directly by other templates.
Basic Partials
In order to use a partial, it must be registered via
Handlebars.registerPartial
. Handlebars.registerPartial('myPartial', '{{name}}')
This call will register the
myPartial
partial. Partials may be precompiled and the precompiled template passed into the second parameter. Calling the partial is done through the partial call syntax:
{{> myPartial }}
Will render the partial named
myPartial
. When the partial executes, it will be run under the current execution context. Dynamic Partials
It's possible to dynamically select the partial to be executed by using sub expression syntax.
{{> (whichPartial) }}
Will evaluate
whichPartial
and then render the partial whose name is returned by this function. Subexpressions do not resolve variables so
whichPartial
must be a function. If a simple variable has the partial name, it's possible to resolve it via the lookup
helper. {{> (lookup . 'myVariable') }}
Partial Contexts
It's possible to execute partials on a custom context by passing in the context to the partial call.
{{> myPartial myOtherContext }}
Partial Parameters
Custom data can be passed to partials through hash parameters.
{{> myPartial parameter=value }}
Will set
parameter
to value
when the partial runs. This is particularly useful for exposing data from parent contexts to the partial:
{{> myPartial name=../name }}
Partial Blocks
The normal behavior when attempting to render a partial that is not found is for the implementation to throw an error. If failover is desired instead, partials may be called using the block syntax.
{{#> myPartial }} Failover content {{/myPartial}}
Which will render
Failover content
if the myPartial
partial is not registered. This block syntax may also be used to pass templates to the partial, which can be executed by the specially named partial,
@partial-block
. A template of {{#> layout }} My Content {{/layout}}
with the
layout
partial containing Site Content {{> @partial-block }}
Would render
Site Content My Content
When called in this manner, the block will execute under the context of the partial at the time of the call. Depthed paths and block parameters operate relative to the partial block rather than the partial template.
{{#each children as |child|}} {{#> childEntry}} {{child.value}} {{/childEntry}} {{/each}}
Will render
child.value
from this template, not the partial. Inline Partials
Templates may define block scoped partials via the
inline
decorator. {{#*inline "myPartial"}} My Content {{/inline}} {{#each children}} {{> myPartial}} {{/each}}
Which will render the
myPartial
partial for each child. Each inline partial is available to the current block and all children, including execution of other partials. This allows for layout templates and similar functionality:
{{#> layout}} {{#*inline "nav"}} My Nav {{/inline}} {{#*inline "content"}} My Content {{/inline}} {{/layout}}
Where the
layout
partial may be: <div class="nav"> {{> nav}} </div> <div class="content"> {{> content}} </div>
© 2011–2017 by Yehuda Katz
Licensed under the MIT License.
https://handlebarsjs.com/partials.html