javascript - 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。