Aurelia：Bindableプロパティが "too late"に設定される

Question

私のカスタム要素には、バインド可能なプロパティ "menu"があります。私の問題は、メニューに依存する「料理」プロパティがメニュープロパティが設定される前に照会される（メニューが未定義で、料理を検索できない）ことです。私はここで何ができますか？

メニュー-control.ts：

import { bindable } from 'aurelia-framework'; 

import { Menu } from '../../../app/model/menu'; 
import { Dish } from '../../../app/model/dish'; 

export class MenuControl { 

    @bindable menu: Menu; 

    get dish1() { 
     return this.getDish(1); 
    } 

    get dish2() { 
     return this.getDish(2); 
    } 

    get dish3() { 
     return this.getDish(3); 
    } 

    getDish(dishNo: number) { 
     return this.menu.dishes.find(x => x.dishNo == dishNo); 
    } 
} 

メニュー-control.html：

<require from="../dish-control/dish-control"></require> 

<div class="tab-content" style="margin-top: 20px; width: 800px;"> 
    <div class="tab-pane fade in active"> 
     <div class="row"> 
      <div class="col-md-8"> 
      </div> 
      <div class="col-md-2" style="padding-left: 0;"> 
      </div> 
      <div class="col-md-2" style="padding-left: 0;"> 
       <label>Vegetarisch</label> 
      </div> 
     </div> 
     <h4>Men&uuml; 1</h4><dish-control dish.bind="dish1"></dish-control> 
     <h4>Men&uuml; 2</h4><dish-control dish.bind="dish2"></dish-control> 
     <h4>Men&uuml; 3</h4><dish-control dish.bind="dish3"></dish-control> 
    </div> 
</div> 

Answer 1

あなたはを置くことができるはずです0のいずれかの親コンポーネントに対しては<dish-control>、さらには<dish-control>に設定してください。このようにして<dish-control>はDOMに接続されず、this.menu.dishesが存在するまで初期化されません。