Aurelia @children decorator not working for grandchildren elements

问题

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

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

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

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

import {bindable} from 'aurelia-framework';

export class CommandButton {
    @bindable btnName;

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

回答1:

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.

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.

来源：https://stackoverflow.com/questions/37328698/aurelia-children-decorator-not-working-for-grandchildren-elements

标签

aurelia