Aurelia: Properti yang dapat diikat terlambat disetel

Dalam elemen khusus saya, saya memiliki "menu" properti yang dapat diikat yang disetel dari luar. Masalah saya adalah properti "hidangan" yang mengandalkan menu ditanyakan sebelum properti menu disetel (jadi menu tidak ditentukan dan hidangan tidak dapat diambil). Apa yang bisa saya lakukan di sini?

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);
    }
}

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 sumber


Jawaban (1)


Anda harus dapat menempatkan if.bind="menu && menu.dishes" pada salah satu komponen induk ke <dish-control>, atau bahkan <dish-control> itu sendiri. Dengan cara ini <dish-control> tidak akan dilampirkan ke DOM dan diinisialisasi sendiri hingga this.menu.dishes ada.

person CBrown77    schedule 10.11.2017