Aurelia @children装饰器不适用于孙元素 [英] Aurelia @children decorator not working for grandchildren elements

问题描述

我有几个这样定制的自定义元素.我发现@children装饰器在命令面板视图模型中正确地给了我'items'数组，它的大小为2个行按钮(与预期的一样).

I have a couple of custom elements that I laid out like this. I find that the @children decorator is giving me the 'items' array properly in the command-panel view-model, it has a size of 2 row-buttons (as expected).

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

The problem I am seeing is in the @children 'buttons' array in the row-button view-model. It is always a size of 0! Can someone let me know what I am doing wrong?

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

command-panel.ts

command-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);
    }
}

row-button.ts

row-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);
    }
}

command-button.ts

command-button.ts

import {bindable} from 'aurelia-framework';

export class CommandButton {
    @bindable btnName;

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

推荐答案

让我以说Aurelia RC1中内容投影正在完全(并且最好是在变化)的方式开头此答案.我们将转向基于插槽的内容投影，以与影子DOM规范的最新版本相匹配.该规范比Aurelia当前基于选择器的设置(基于Shadow DOM规范的早期版本)要强大得多.这是我们从现在到Aurelia完整1.0计划的唯一重大突破.

Let me preface this answer by saying that content projection is changing completely (and for the better) in Aurelia RC1. We are moving to slot based content projection to match up with the newest version of the shadow DOM specs. This spec is much more powerful than the selector based setup that Aurelia has current (which is based on an earlier version of the Shadow DOM spec). This is the only breaking change we have planned between now and the full 1.0 of Aurelia.

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

So everything I'm telling you will be obsolete very soon.

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

In the meantime, make sure that the <content></content> element in row-button.html is at the root of the template. This should make the children decorator work as you're expecting. As to the why Aurelia is acting this way, well it's a bug:-) It'll be fixed in the new slot-based approach.

这篇关于Aurelia @children装饰器不适用于孙元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！