Aurelia @孫の飾り孫が孫の要素のために働いていない

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です:-)これは新しいスロットベースのアプローチで修正される予定です。