Aurelia: คุณสมบัติ Bindable ได้รับการตั้งค่าช้าเกินไป

ในองค์ประกอบที่กำหนดเองของฉันฉันมี "เมนู" คุณสมบัติที่สามารถผูกได้ซึ่งได้รับการตั้งค่าจากภายนอก ปัญหาของฉันคือคุณสมบัติ "จาน" ที่ต้องอาศัยเมนูจะถูกสอบถามก่อนที่จะตั้งค่าคุณสมบัติเมนู (ดังนั้นเมนูจึงไม่ได้กำหนดไว้และไม่สามารถเรียกข้อมูลอาหารได้) ฉันจะทำอะไรที่นี่?

เมนู-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);
    }
}

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


person IngoB    schedule 09.11.2017    source แหล่งที่มา


คำตอบ (1)


คุณควรใส่ if.bind="menu && menu.dishes" บนคอมโพเนนต์พาเรนต์ใดๆ ลงใน <dish-control> หรือแม้แต่ <dish-control> เองก็ได้ วิธีนี้จะไม่แนบ <dish-control> กับ DOM และเริ่มต้นตัวเองจนกว่า this.menu.dishes มีอยู่

person CBrown77    schedule 10.11.2017