Ligação de dados bidirecional nos elementos personalizados Aurelia - vincular elemento personalizado ao modelo de exibição pai

No meu aplicativo, fiz muitos "serviços" que posso injetar nos meus modelos de exibição para economizar redundância e tempo.

Agora, estou olhando para dar um passo adiante e criar esses elementos de formulário (selecione, texto, caixas de seleção - uma lista suspensa de seleção para iniciantes) e transformá-los em elementos personalizados, injetando o serviço apenas no elemento personalizado.

Eu posso fazê-lo funcionar até certo ponto. O elemento personalizado (selecione neste caso) é exibido quando eu o exijo na visualização "pai", no entanto, quando altero o valor selecionado do elemento de seleção personalizado, ele não se liga ao modelo de exibição "pai", que é meu requisito .

Eu quero poder vincular meu valor selecionado do elemento personalizado a uma propriedade no modelo de exibição "pai" por meio do atributo bind em seu modelo.

Atualizarei um pequeno trecho de código em alguns minutos.

create.js (o que eu chamo de viewmodel pai)

import {bindable} from 'aurelia-framework';
export class Create{
    heading = 'Create';
    @bindable myCustomElementValue = 'initial value';
}

create.html (visualização principal)

<template>
    <require from="shared/my-custom-element"></require>
    <my-custom selectedValue.bind="myCustomElementValue"></my-custom>
    <p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p>
</template>

my-custom.js

import { inject, bindable} from 'aurelia-framework';
import MyService from 'my-service';

@inject(MyService )
export class MyCustomCustomElement {
    @bindable selectedValue;

    constructor(myService ) {
        this.myService = myService ;
    }

    selectedValueChanged(value) {
        alert(value);
        this.selectedValue = value;
    }

    async attached() {
        this.allSelectableValues = await this.myService.getAllValues();
    }
}

O que acontece é inicialmente que a visualização create.html gera "valor inicial" e, conforme altero o valor da seleção do elemento personalizado, o novo valor selecionado é alertado, mas não atualiza a variável pai vinculada, que ainda está apenas exibindo "valor inicial".

questionAnswers(1)

yourAnswerToTheQuestion