{{>key}}
Render another template within the current template.
{{>key [EXPRESSION]}}
Looks up another template with key and renders it with the current scope or
EXPRESSION added on top of the current scope.
stache.registerPartial( "address.stache", "<p>{{street}} {{city}}</p>" );
const template = stache( "{{#each(people)}} {{>address.stache address}} {{/each}}" );
Parameters
- key
{KeyLookup Expression|String}:A key used to lookup a stache renderer function.
The behavior is determined by what the key returns.
If the key returns a
function, that function is used as the renderer function. The renderer function is called with the current scope (or a scope modified byEXPRESSION) and the result is inserted in place of the magic tag.If the key returns a
string, that string is used as the renderer function name. If the key returnsundefined, the key itself is used as the renderer function name.Once the renderer function name is known, the renderer function is looked for by the same name. A renderer function is looked for in the following places:
- In [can-view-scope.Options]’s
partialsproperty. - In partials registered with registerPartial.
- For an element whose
idmatches renderer function name. ItsinnerHTMLwill be converted to a template.
The renderer function is called with the current scope (or a scope modified by
EXPRESSION) and the result is inserted in place of the magic tag. - In [can-view-scope.Options]’s
- EXPRESSION
{KeyLookup Expression|Call Expression}:An optional expression that adds a new context to the can-view-scope the template is rendered with.
Use
Partials are templates embedded in other templates. Partials begin with a greater than sign, like {{>my_partial}}. Partials inherit the calling scope.
Partials render at runtime, so recursive partials are possible but make sure you avoid infinite loops.
Partials are typically registered registerPartial like:
stache.registerPartial( "address.stache", "<p>{{street}} {{city}}</p>" );
And called within another template like:
const template = stache( "{{#person.address}} {{>address.stache}} {{/person.address}}" );
With data like {person: {address: {street: "123 Evergreen", city: "Chicago"}}},
rendering template would produce:
<p>123 Evergreen Chicago</p>
The 2nd argument to {{>key}} can specify a different context for the partial to be rendered
with. The following example renders the same thing as above:
const template = stache( "{{#person}} {{>address.stache address}} {{/person}}" );
Functions as partials
{{>key}} can be used to call renderer functions in the scope. For example:
<!-- Template -->
{{#item}}{{>myPartial}}{{/item}}
{
item: { name: "Justin" },
myPartial: stache( "{{name}}" )
}
<!-- Result -->
Justin
Script tags as partials
{{>key}} can be used to render the contents of script tags.
For example, if you've embedded a partial like:
<script type='text/stache' id='todo-stache'>
<li>{{name}}</li>
</script>
This can be rendered like:
{{#each(todos)}}{{>todo-stache}}{{/each}}