Pass array from parent template to child template

问题:

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?

回答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