親テンプレートから子テンプレートへ配列を渡す

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では大文字と小文字が区別されます。

@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 

：あなたは単語を分割するためにハイフンを使用する必要があります混在する場合のプロパティのために要するに https://github.com/aurelia/binding/issues/307

を参照してください。