Aurelia @children 装饰器不适用于孙子元素

Question

我有几个自定义元素是这样布置的。我发现 @children 装饰器在命令面板视图模型中正确地为我提供了 'items' 数组，它的大小为 2 行按钮（如预期的那样）。

我看到的问题是行按钮视图模型中的@children 'buttons' 数组。它的大小始终为 0！有人可以让我知道我做错了什么吗？

<command-panel label="Test" icon="fa-shield">
    <row-button row-title="Row1">
        <command-button btn-name="Force"></command-button>
    </row-button>
    <row-button row-title="Row2">
        <command-button btn-name="Test"></command-button>
    </row-button>
</command-panel>

命令-panel.ts

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

export class CommandPanel {
    @bindable label;
    @bindable icon;
    @children('row-button') items = [];        

    bind(bindContext) {
        console.log(this.items);
    }
}

行-button.ts

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

export class RowButton {
    @bindable rowTitle;
    @bindable icon;
    @children('command-button') buttons = [];
    selectedItem = null;

    constructor() {            
        console.log(this.buttons);
    }
}

命令-button.ts

import {bindable} from 'aurelia-framework';

export class CommandButton {
    @bindable btnName;

    btnNameChanged(newValue) {
        console.log("label is " + this.btnName);
    }
}

Answer 1

让我先说明一下 Aurelia RC1 中的内容投影正在完全改变（并且变得更好）。我们正在转向基于插槽的内容投影，以与最新版本的影子 DOM 规范相匹配。该规范比 Aurelia 目前拥有的基于选择器的设置（基于 Shadow DOM 规范的早期版本）强大得多。这是我们从现在到完整的 Aurelia 1.0 之间计划的唯一重大更改。

所以我告诉你的一切很快就会过时。

同时，确保 row-button.html 中的 <content></content> 元素位于模板的根部。这应该使儿童装饰器按照您的预期工作。至于 为什么 Aurelia 这样做，这是一个 bug:-) 它将在新的基于插槽的方法中得到修复。

Aurelia @children 装饰器不适用于孙子元素

Aurelia @children decorator not working for grandchildren elements

aurelia