2016-02-26 10 views
8

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.

+0

Wygląda na to, że jest to znany błąd: https://github.com/aurelia/templating/issues/253 – Vaccano

+0

Zmiana powiązania z '.two-way' (zamiast tylko' .bind') w kodzie HTML obejścia tego problemu. – Vaccano

+1

Wygląda na to, że ten problem został zamknięty. Czy możesz go użyć tak, jak chcesz, bez obejścia? –

Odpowiedz

-1

Spróbuj zainicjować zmienną unmaskedValue z wartością domyślną. Spróbuj null, undefined, "" i tak dalej. I zrobili to wcześniej, ale don `t pamiętam w jakiej wersji (na pewno było beta)

Powiązane problemy