Partials

Overview

Partial

Render a Partial template

The Partial helper can be useful for passing a Partial template to a component. For example, using a Partial to render a custom icon for a button.

Syntax:

{{! Standalone }}
{{Partial "[PartialName]" [parameters1] [parameters2] ..}}

{{! As a context to another Partial }}
{{> OtherPartial (Partial "[PartialName]" [parameters1] [parameters2] ..) }}

{{! As a parameter to another Partial }}
{{> OtherPartial [parameter name]=(Partial "[PartialName]" [parameters1]) }}

Example:

{{! Define the Partials }}
<script id="custom-icon" type="text/x-handlebars-template">
<img src='{{img}}' width='40' height="40">
</script>
<script id="button-label" type="text/x-handlebars-template">
    <button>{{label}}</button>
</script>

{{! Pass the Partial to another Partial }}
{{> 'button-label' label=(Partial "custom-icon" img="wireframe.png") }}

Output:

<button><img src='wireframe.png' width='40' height="40"></button>

Copy

Copy all of the attributes from the outer template to the inner template. This is useful for passing arbitrary parameters from the outer template to the children.

Syntax:

{{#copy [context] [ignore] [ignore] ..}}
    {{> [PartialName] [parameters1] [parameters2] ..}}
{{/copy}}

Usage:

{{! Define the Partials }}
<script id="button-label" type="text/x-handlebars-template">    
    {{! Copy all the parameters from the outer partial to the inner }}
    {{! Pass the first parent context with the "." }}
    {{! Do not copy the label parameter }}
    {{#copy . 'label'  }}
        {{! Use the label directly here, don't pass it using copy}}
        {{T "Button" label buttonType='set'}}
    {{/copy}}
</script>

Given:

{{> button-label label="Hello Mom" param1="value1" param2="value2" }}

The copy operation:

<script id="button-label" type="text/x-handlebars-template">    
    {{#copy . 'label'  }}
        {{T "Button" label buttonType='set'}}
    {{/copy}}
</script>c

is equivalent to:

<script id="button-label" type="text/x-handlebars-template">    
    {{T "Button" label buttonType='set'  param1=param1 param1=param1 }}
</script>

Examples:

Define some Partials:

<script id="button-label" type="text/x-handlebars-template">    
    {{#copy . 'label'  }}
        {{T "Button" label buttonType='set'}}
    {{/copy}}
</script>

<script id="button-icon" type="text/x-handlebars-template">    
    {{#copy . 'label' 'img' }}
        {{T "Button" (Partial "custom-icon" img=img) buttonType='set'}}
    {{/copy}}
</script>

<script id="icon" type="text/x-handlebars-template">    
    {{#copy . 'label' 'img' }}
        {{> custom-icon  buttonType='set'}}
    {{/copy}}
</script>

<script id="custom-icon" type="text/x-handlebars-template">
<img src='{{img}}' {{@attr}} width='40' height="40">
</script>

Now use the Partials:

{{!-- pass a Partial into another Partials parameters --}}
Custom User Controls:
<br/>
{{> 'button-label' 
    label=(Partial "custom-icon" img="app/assets/wireframe.png") 
    data-var-name='tmplitTest:tmplit.SetButton' 
    class='lux-hide'
}}

{{> 'button-icon' 
    img="app/assets/wireframe.png" 
    data-var-name='tmplitTest:tmplit.SetButton' 
    class='lux-hide'
}}

{{> 'icon' 
    img="app/assets/wireframe.png" 
    data-var-name='tmplitTest:tmplit.SetButton' 
    class='lux-btn-set lux-hide'
}}

Output:

Custom User Controls:
<br/>
<button data-var-name="tmplitTest:tmplit.SetButton" class="lux-hide"><img src='app/assets/wireframe.png' width='40' height="40"></button>
<button data-var-name="tmplitTest:tmplit.SetButton" class="lux-hide"><img src='app/assets/wireframe.png' width='40' height="40"></button>
<img src='app/assets/wireframe.png' data-var-name="tmplitTest:tmplit.SetButton" class='lux-btn-set lux-hide' width='40' height="40">

Repeat

Repeat a Partial template given a parameter. This also gives the Partial template access to the index of the loop.

Syntax

{{#repeat [count] }}
    {{> [PartialName] [index parameter]={{@index}} [parameters2] ..}}
{{/repeat}}

Example

{{#repeat 4}}
<div>Repeat {{@index}}</div>
{{/repeat}}

Output:

<div>Repeat 0</div>
<div>Repeat 1</div>
<div>Repeat 2</div>
<div>Repeat 3</div>