Question

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

我看到的问题是在行按钮视图模型中的@children'按钮'数组中。它的大小总是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中的内容投影正在完全改变（并且更好）。我们正在转向基于插槽的内容投影，以匹配最新版本的shadow DOM规范。此规范比Aurelia目前基于选择器的设置（基于Shadow DOM规范的早期版本）更强大。这是我们从现在到Aurelia的完整1.0之间计划的唯一重大变化。

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

在此期间，请确保<content></content>中的row-button.html元素位于模板的根目录中。这应该让儿童装饰师像你期待的那样工作。至于为什么 Aurelia以这种方式行事，那么它是bug :-)它将在新的基于插槽的方法中修复。

Aurelia @children装饰师不为孙子元素

1 个答案: