Aurelia 自定义元素 - $parent undefined

Question

我有带有中继器的模板：

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

打印结果：

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>

结果只有：

-
-
-
-

有没有办法将 $parent 和 $index 透明地传播到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>

child-item 模板的样子：

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

将$parent 上下文直接与parent.bind="$parent" 绑定不起作用。必须直接绑定父索引。使用这种方法，任何与$parent.$parent.$index 内联的东西都无法实现。

Answer 1

这样的事情会起作用

子项.ts：

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

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

子项.html

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

带有中继器的模板：

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

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

Answer 2

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