UPDATE: Похоже, это известная ошибка: https://github.com/aurelia/templating/issues/253
Я оставляю его здесь для целей ссылки/возможность поиска.Двусторонний связывания в Aurelia пользовательского атрибут
Кодекс:
ввода-mask.ts (Полный код можно увидеть here)
@customAttribute('input-mask')
@inject(Element)
export class InputMaskCustomAttribute {
@bindable({ defaultBindingMode: bindingMode.twoWay,
changeHandler: 'onUnmaskedValueChanged' })
unmaskedValue: any;
onUnmaskedValueChanged(newValue, oldValue) {
console.log('unmaskedValue updated from inside the custom attribute');
}
@bindable
mask: string;
attached() {
this.eventTarget.on('focusout', (e: any) => {
this.unmaskedValue = (<any>$(this.element)).cleanVal()
this.fireEvent(e.target, 'input');
});
}
// Code for constructor, fireEvent and to setup the mask...
}
carrier.html
<input input-mask="mask.bind: carrier.airbillMask; unmasked-value.bind: airbill"
value.bind="formattedAirbill"/>
ОБНОВЛЕНИЕ: Чтобы обойти эту ошибку, измените ее на
unmasked-value.two-way
, и привязка будет работать.
carrier.ts
@bindable({ defaultBindingMode: bindingMode.twoWay})
carrier: EntityInterfaces.ICarrier;
@bindable({ defaultBindingMode: bindingMode.twoWay })
formattedAirbill: string;
@bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'onAirbillChanged' })
airbill: string;
onAirbillChanged() {
console.log('Airbill was set!');
}
Проблема:
данные, кажется, впадают в @bindable
переменную просто отлично. По мере изменения маски значение в пользовательском атрибуте изменяется.
Но, по-видимому, оно не течет, если изменения сделаны в пользовательском атрибуте.
Пример сценария: После того как я изменить значение в поле ввода и выхода на вход, в focusout
пожаров событий и о консоли, которая указывает, что разоблачены Value был обновлен внутри пользовательских атрибутов принтами:
unmaskedValue обновляется внутри пользовательских атрибутов
Но (когда вход теряет фокус) заявление консоли говоря, что airbill
на файл carrier.ts был обновлен не срабатывает, когда я выхожу на поле ввода:
Это не срабатывает:
console.log («! накладная был установлен»);
Это, похоже, показывает мне, что привязка не является действительно двусторонней.
Вопрос:
Как я могу сделать это связывание двухстороннего? Итак, когда я обновляю unmaskedValue
внутри пользовательского атрибута, он обновит значение привязки в модели представления?
Примечание: В качестве обходного пути я смог изменить unmasked-value.bind
как вызов метода (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)
) и обновить значение в этом методе. Поэтому мне не нужно это работать.Но я хотел бы знать, возможно ли это для будущего использования.
Похоже, это известная ошибка: https://github.com/aurelia/templating/issues/253 – Vaccano
Изменение этой привязки к '.two-way' (а не просто' .bind') в HTML работает вокруг этой проблемы. – Vaccano
Похоже, эта проблема была закрыта, можете ли вы использовать ее так, как вы хотели сейчас, без обходного пути? –