Передача массива из родительского шаблона в дочерний шаблон

Question

Ситуация

Нам удалось передать массив с родительского экрана на шаблон. customAttribute работает, но historyItems нет.

родитель-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> 

ребенка template.html

<template> 

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

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

</template> 

ребенка-template.ts

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

@autoinject 
export class ChildTemplate { 

    @bindable customAttribute : string; 
    @bindable historyItems; 

    constructor() { 

    } 
} 

Вопрос

Как мы можем передать historyItems массив?

Answer 1

Вы должны использовать history-items.bind="history[0].HistoryItems".

По соглашению Aurelia дешифрует имена пользовательских элементов и имена связующих свойств, которые имеют смешанный корпус. Это потому, что HTML нечувствителен к регистру, поэтому выражение типа historyItems.bind не будет отличаться от historyitems.bind. Однако то же самое не подходит для JavaScript, который учитывает регистр. См https://github.com/aurelia/binding/issues/307

Короче говоря, для смешанных свойств случае вы должны использовать дефис для разделения слов:

@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