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.
Sembra che questo è un bug noto: https://github.com/aurelia/templating/issues/253 – Vaccano
Cambiare il binding in '.two-way' (anziché solo' .bind') nell'HTML funziona su questo problema. – Vaccano
Sembra che questo problema sia stato chiuso, puoi usarlo come volevi ora, senza la soluzione? –