Двусторонняя привязка данных в пользовательских элементах 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 выводится «начальное значение», и когда я изменяю значение выбранного пользовательского элемента, новое выбранное значение получает предупреждение, но оно не обновляет связанную родительскую переменную, которая по-прежнему просто отображает "Начальное значение".