UPDATE: Wygląda na to, że jest to znany błąd: https://github.com/aurelia/templating/issues/253
Wyjeżdżam go tutaj dla celów referencyjnych/możliwości wyszukiwania.wiążące w Aurelia Niestandardowy Two-Way Atrybut
Kod:
input-mask.ts (pełny kod widać 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"/>
AKTUALIZACJA: Aby obejść ten błąd, należy zmienić na
unmasked-value.two-way
, a powiązanie będzie działać.
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!');
}
problem:
Dane wydaje się płynąć do @bindable
zmiennej dobrze. W miarę zmiany maski zmienia się wartość w atrybucie niestandardowym.
Ale wydaje się, że nie wypłynie, jeśli wprowadzono zmiany w atrybucie niestandardowym.
Przykład Scenariusz: Po edycji wartości w polu wprowadzania i wyjść wejściu, pożarów zdarzeń focusout
oraz oświadczenie konsoli, która wskazuje, że zdemaskowany Wartość została zaktualizowana od wewnątrz niestandardowych atrybutów wydruków:
unmaskedValue aktualizowany od wewnątrz zwyczaju przypisywać
Ale (gdy wejście traci ostrość) oświadczenie konsola mówiąc, że airbill
plik carrier.ts została zaktualizowana nie ogień, kiedy zamknąć okno wejściowe:
to nie ogień:
console.log („! lotniczego listu przewozowego został ustawiony”);
Wydaje się to pokazywać, że wiązanie nie jest w rzeczywistości dwukierunkowe.
Pytanie:
Jak mogę dokonać tej wiążącej dwukierunkową? Tak więc, gdy zaktualizuję unmaskedValue
wewnątrz atrybutu niestandardowego, zaktualizuje on powiązaną wartość w modelu widoku?
Uwaga: Jako obejście problemu udało mi się zmienić unmasked-value.bind
na wywołanie metody (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)
) i zaktualizować wartość w tej metodzie. Więc NIE POTRZEBUJĘ tego do działania.Chciałbym jednak wiedzieć, czy jest to możliwe do wykorzystania w przyszłości.
Wygląda na to, że jest to znany błąd: https://github.com/aurelia/templating/issues/253 – Vaccano
Zmiana powiązania z '.two-way' (zamiast tylko' .bind') w kodzie HTML obejścia tego problemu. – Vaccano
Wygląda na to, że ten problem został zamknięty. Czy możesz go użyć tak, jak chcesz, bez obejścia? –