アウレリアのカスタム要素 - 未定義の$の親、私がリピーターでテンプレートを持っている

Question

：プリントが発生

​​

：

0 - 0 
0 - 1 
1 - 0 
1 - 1 

私は、同じテンプレートを使用してカスタム要素child-itemを使用する場合：

<template> 
    <p>${ $parent.$index } - ${ $index }</p> 
</template> 

そして、元の例をchild-item：

<template repeat.for="i of 2"> 
    <child-item repeat.for="j of 2"></child-item> 
</template> 

結果は次のとおりです。

- 
- 
- 
- 

はchild-itemに透過的に$の親と$インデックスを伝播する方法はありますか？いくつかの提案をしようとした後

UPDATE

、私が来た最も近いがこれです：

child-itemテンプレートがどのように見える

<template repeat.for="i of 2"> 
    <child-item repeat.for="j of 2" parent-index.bind="$parent.$index" index.bind="$index"></child-item> 
</template> 

：ないparent.bind="$parent"と直接$parentコンテキストをバインド

<template bindable="parentIndex, index"> 
    <p>${ parentIndex } - ${ index }</p> 
</template> 

作業。親インデックスは直接バインドする必要があります。このアプローチでは、$parent.$parent.$indexとインライン化することはできません。

Answer 1

データバインディングを使用して渡す必要があります。child-itemビューモデルにparentまたはindex結合可能プロパティを追加します。このような

Answer 2

何かが

子-item.ts動作します：

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

    @customElement('child-item') 
    export class ChildItem { 
     @bindable index; 
    } 

子-item.html

<template> 
    <p>${ index }</p> 
</template> 

をリピーターとテンプレート：

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

    <child-item repeat.for="child of childred" index.bind="$index"></child-item> 
</template>