How to create two-way bindings for a conditional element?

[ultimaweapon]

I tried something like:

enum SetupPage {
    Intro,
    DataRoot,
}

export component SetupWizard inherits Window {
    in-out property <string> data-root <=> dr.path;

    private property <SetupPage> page: SetupPage.Intro;

    VerticalLayout {
        if page == SetupPage.Intro: Intro {
            vertical-stretch: 1;
        }

        if page == SetupPage.DataRoot: dr := DataRoot {
            vertical-stretch: 1;
        }
    }
}

But it does not works. It is error with Error: cannot access id 'dr'.

[ogoffart]

The trick is to go the other way around:

export component SetupWizard inherits Window {
    in-out property <string> data-root;

    private property <SetupPage> page: SetupPage.Intro;

    VerticalLayout {
        if page == SetupPage.Intro: Intro {
            vertical-stretch: 1;
        }

        if page == SetupPage.DataRoot: dr := DataRoot {
            vertical-stretch: 1;
            path <=> root.data-root;
        }
    }
}

[ultimaweapon]

Did not know that we can do it on a child property instead. Thanks.