Pass array from parent template to child template
<h1>Situation</h1>

<p>We have been able to pass an array from the parent screen to the template. The <code>customAttribute</code> works but the <code>historyItems</code> does not. </p>

<p>parent-template.html</p>

<pre><code>&lt;template&gt;

    &lt;require from="./child-template"&gt;&lt;/require&gt;

    &lt;child-template

         historyItems.bind="history[0].HistoryItems" 
         custom-attribute.bind="history[0].HistoryItems.length"&gt;

    &lt;/child-template&gt;

&lt;/template&gt;
</code></pre>

<p>child-template.html</p>

<pre><code>&lt;template&gt;

    ${customAttribute} 
    ${historyItems.length} 
    ${historyItems}

    &lt;p repeat.for="item of historyItems"&gt;
        Foobar
    &lt;/p&gt;

&lt;/template&gt;
</code></pre>

<p>child-template.ts</p>

<pre><code>import {autoinject, bindable} from 'aurelia-framework';

@autoinject
export class ChildTemplate {

    @bindable customAttribute : string;
    @bindable historyItems;

    constructor() {

    }
}
</code></pre>

<h1>Question</h1>

<p>How can we pass the <code>historyItems</code> array?</p>