2016-02-26 8 views
8

UPDATE: Es sieht aus wie dies ein bekannter Fehler ist: https://github.com/aurelia/templating/issues/253
ich es hier als Referenz/Auffindbarkeit Zwecke verlasse.Two-Way in einem Aurelia Individuelle Bindungseigenschaften

Der Code:

Eingangs-mask.ts (Full-Code kann here zu sehen)

@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"/> 

UPDATE: Um diesen Fehler zu umgehen, wechseln Sie zu unmasked-value.two-way und die Bindung funktioniert.

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!'); 
} 

das Problem:

Die Daten scheinen in die @bindable Variable einfach gut zu fließen. Wenn sich die Maske ändert, wird der Wert im benutzerdefinierten Attribut geändert.

Es scheint jedoch nicht zu fließen, wenn innerhalb des custom-Attributs Änderungen vorgenommen werden.

Beispielszenario: Nachdem ich den Wert in das Eingabefeld ein, bearbeiten und den Eingang verlassen, die focusout Ereignis ausgelöst wird und die Konsole Anweisung, die in der benutzerdefinierten zeigt an, dass von der unmaskierte Wert wurde aktualisiert Attribut druckt:

unmaskedValue aus dem Inneren des benutzerdefinierten aktualisiert Attribut

aber (wenn der Eingabefokus verliert) die Konsole Erklärung, dass die airbill auf der carrier.ts Datei nicht ausgelöst wurde aktualisiert, wenn ich das Eingabefeld verlassen:

Dies gilt nicht Feuer:
console.log (‚! Luftfrachtbrief gesetzt wurde‘);

Dies scheint mir zu zeigen, dass die Bindung nicht wirklich zwei-Wege ist.

Die Frage:

Wie kann ich diese Bindung Zwei-Wege machen? Wenn ich das unmaskedValue innerhalb des custom-Attributs aktualisiere, aktualisiert es den gebundenen Wert im Ansichtsmodell?

Hinweis: Als Workaround konnte ich unmasked-value.bind als Methodenaufruf (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)) ändern und den Wert in dieser Methode aktualisieren. Also brauche ich das nicht zu arbeiten.Aber ich würde gerne wissen, ob es für zukünftige Verwendung möglich ist.

+0

Sieht aus wie dies ein bekannter Fehler ist: https://github.com/aurelia/templating/issues/253 – Vaccano

+0

Um dieses Problem zu beheben, funktioniert das Ändern der Bindung an ".wo-way" (statt nur ".bind") in dem HTML. – Vaccano

+1

Sieht so aus, als wäre dieses Problem geschlossen. Können Sie es jetzt ohne die Problemumgehung wie gewünscht verwenden? –

Antwort

-1

Versuchen Sie, die Variable unmaskedValue mit dem Standardwert zu initialisieren. Versuche es mit null, undefiniert, '' und so weiter. Ich habe dies getan, bevor aber ich don `t, in der Version erinnern (auf jeden Fall war es beta)