Aurelia @children 动态数据

Question

假设我有一个自定义元素，我在其中迭代数据数组并呈现自定义子元素。

<my-list action-handler.bind="actionHandler">
  <my-element item.bind="element" repeat.for="element of data"></my-element>
</my-list>

在 my-list.html 中，我用 <contents></contents> 渲染内容，一般来说，实际代码有点复杂，并且有可替换的模板部分，但这不是问题所在。

我希望我绑定到 MyList 的 actionHandler 在所有子项中可用。为了优雅，我们在 my-list.js:

@children('*:not(div)') listItems;

//...
attached(){
    this.listItems.forEach((e) => {
        e.actionHandler = this.actionHandler;
    });
}

在我们开始动态加载数据之前一切正常。在这种情况下 listItems 为空，因为元素在子元素重新呈现之前已初始化。

所以，问题是：

如何让 @children 重新计算？

我知道我们可以将 actionHandler 绑定到所有子项上，当我们重复它们时，但是当我们添加更多逻辑时，这看起来真的很难看

谢谢！

Answer 1

如果 <my-element> 依赖于它的父元素 <my-list> 的 actionHandler，您可以声明性地表达它，让 Aurelia 的依赖注入系统完成其余的工作。这里有几种方法可以做到这一点...

如果<my-element>总是在<my-list>内（不一定需要直接在里面）：

import {inject} from 'aurelia-dependency-injection';

@inject(MyList)
export class MyElement {
  constructor(list) {
    this.actionHandler = list.actionHandler;
  }
}

如果您需要访问 <my-element> 最接近的父自定义元素，无论它是什么：

import {inject, Parent} from 'aurelia-dependency-injection';

@inject(Parent.of(Element))
export class MyElement {
  constructor(parent) {
    this.actionHandler = parent.actionHandler;
  }
}

我知道这不是您要问的，但我提出这个建议是为了以更简单的方式满足您的要求。

Answer 2

Aurelia 作弊 Sheet 告诉我们：

@children(selector) - Decorates a property to create an array on your class that has its items automatically synchronized based on a query selector against the element's immediate child content.

所以我想 @children 不能用于动态数据。

您可能应该采用 Parent 方法，就像前面的答案所建议的那样。

Aurelia @children 动态数据

Aurelia @children with dynamic data

javascript

parent-child

aurelia

所以，问题是：