Pass array from parent template to child template

Question

Situation

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

parent-template.html

<template>

    <require from="./child-template"></require>

    <child-template

         historyItems.bind="history[0].HistoryItems" 
         custom-attribute.bind="history[0].HistoryItems.length">

    </child-template>

</template>

child-template.html

<template>

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

    <p repeat.for="item of historyItems">
        Foobar
    </p>

</template>

child-template.ts

import {autoinject, bindable} from 'aurelia-framework';

@autoinject
export class ChildTemplate {

    @bindable customAttribute : string;
    @bindable historyItems;

    constructor() {

    }
}

Question

How can we pass the historyItems array?

Answer 1

You have to use history-items.bind="history[0].HistoryItems".

By convention, Aurelia hyphenates custom element names and bindable property names that have mixed casing. That is because HTML is case-insensitive, so an expression like historyItems.bind wouldn't be different than historyitems.bind. However, the same is not valid for JavaScript, which is case-sensitive. See https://github.com/aurelia/binding/issues/307

In short, for mixed case properties you must use a hyphen to split words:

@bindable historyItems; <-- js file
history-items.bind="something"; <-- html file
repeat.for="item of historyItems" //<-- here you should not use hyphen because it is not an html expression