2016-02-26 13 views
8

UPDATE: Sembra che questo è un bug noto: https://github.com/aurelia/templating/issues/253
lascio qui a fini di riferimento/ricercabilità.vincolante in un Aurelia personalizzato bidirezionale Attributo

Il Codice:

ingresso-mask.ts (codice completo può essere visto 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"/> 

UPDATE: Per ovviare a questo errore, passare a unmasked-value.two-way e il binding funzionerà.

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

il problema:

I dati sembra fluire nel @bindable variabile bene. Man mano che la maschera cambia, il valore nell'attributo personalizzato viene modificato.

Ma non sembra scorrere se vengono apportate modifiche all'interno dell'attributo personalizzato.

Esempio Scenario: Dopo posso modificare il valore nella casella di input e uscire l'ingresso, l'evento focusout e la dichiarazione console che indica che il valore non mascherata è stato aggiornato da dentro l'attributo personalizzato stampe:

unmaskedValue aggiornato da dentro il costume attribuiscono

Ma (quando l'ingresso perde concentrarsi) la dichiarazione console dicendo che il airbill sul file carrier.ts è stato aggiornato non si attiva quando esco la casella di input:

questo non incendio:
console.log ('! airbill è stato impostato');

Questo sembra dimostrarmi che l'associazione non è realmente bidirezionale.

la domanda:

Come posso fare questo legame a doppio senso? In modo che quando aggiorno unmaskedValue all'interno dell'attributo personalizzato aggiornerà il valore associato nel modello di vista?

Nota: Per ovviare al problema, è stato possibile modificare unmasked-value.bind in una chiamata al metodo (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)) e aggiornare il valore in tale metodo. Quindi non ho bisogno di farlo funzionare.Ma mi piacerebbe sapere se è possibile per un uso futuro.

+0

Sembra che questo è un bug noto: https://github.com/aurelia/templating/issues/253 – Vaccano

+0

Cambiare il binding in '.two-way' (anziché solo' .bind') nell'HTML funziona su questo problema. – Vaccano

+1

Sembra che questo problema sia stato chiuso, puoi usarlo come volevi ora, senza la soluzione? –

risposta

-1

Provare a inizializzare la variabile unmaskedValue con il valore predefinito. Prova null, undefined, '' e così via. L'ho fatto prima, ma ho don`t ricordare in quale versione (certamente era beta)

Problemi correlati