Двусторонняя привязка данных в пользовательских элементах Aurelia - привязка пользовательского элемента к родительской модели представления

В своем приложении я сделал много «сервисов», которые я могу добавить в мои модели просмотра, чтобы сэкономить некоторую избыточность и время.

Теперь я хочу сделать еще один шаг вперед и сделать эти элементы формы (выделение, текст, флажки - выпадающий список выбора для начинающих) и превратить их в настраиваемые элементы, внедряя службу только в настраиваемый элемент.

Я могу заставить это работать до некоторой степени. Пользовательский элемент (выберите в данном случае) отображается, когда мне требуется его в представлении «родитель», однако, когда я изменяю выбранное значение пользовательского элемента выбора, он не привязывается к «родительской» модели представления, что является моим требованием ,

Я хочу иметь возможность привязать выбранное значение из пользовательского элемента к свойству в «родительской» модели представления через атрибут bind в его шаблоне.

Я обновлю небольшой фрагмент кода через несколько минут.

create.js (то, что я называю родительской моделью представления)

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

create.html (родительский вид)

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

мой-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();
    }
}

Первоначально в представлении create.html выводится «начальное значение», и когда я изменяю значение выбранного пользовательского элемента, новое выбранное значение получает предупреждение, но оно не обновляет связанную родительскую переменную, которая по-прежнему просто отображает "Начальное значение".

Ответы на вопрос(1)

Ваш ответ на вопрос