Aurelia custom element - $parent undefined

Question

I have template with repeater:

<template repeat.for="i of 2">
    <template repeat.for="j of 2">
        <p>${ $parent.$index } - ${ $index }</p>
    </template>
</template>

Which prints result:

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

If I use custom element child-item with the same template:

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

And write my original example using child-item :

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

Result is only:

-
-
-
-

Is there a way to propagate $parent and $index transparently to the child-item ?

UPDATE

After trying few suggestions, closest I came is this:

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

Where child-item template looks like:

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

Binding $parent context directly with parent.bind="$parent" does not work. Parent index has to be bound directly. With this approach anything inline with $parent.$parent.$index is not achievable.

Answer 1

something like this will work

child-item.ts:

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

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

child-item.html

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

template with repeater:

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

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

Answer 2

您将需要使用数据绑定来传递它。将parent或index可绑定属性添加到child-item视图模型。