Aurelia@儿童动态数据

Aurelia @children with dynamic data

本文关键字：数据 动态 Aurelia@      更新时间：2024-01-07

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

<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时，我们可以将其绑定到所有的孩子，但当我们添加更多的逻辑（如）时，这会变得非常丑陋

谢谢！

如果<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;
  }
}

我知道这并不是你所要求的，但我建议这样做，以防这是一种更简单的方式来满足你的要求。

Aurelia作弊表告诉我们：

@children（选择器）-修饰一个属性以在类上创建一个数组，该数组根据查询选择器针对元素的立即子内容自动同步其项。

所以我认为CCD_ 14不可能与动态数据一起使用。

你可能应该采用"家长"的方法，就像前面的答案所建议的那样。

相关文章：