UPDATE: Looks like this is a known bug: https://github.com/aurelia/templating/issues/253
I leave it here for reference / search.
The code:
input-mask.ts (full code can be seen 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: To work around this error, change it to unmasked-value.two-way and the binding will work.
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:
It looks like the data is flowing into the @bindable variable. As the mask changes, the value in the user attribute changes.
But it doesn't seem to flow if there is a change inside the user attribute.
Scenario example: After I edit the value in the input field and focusout input, the focusout event will occur and the console operator will indicate that the value of the masked value has been updated from printing user attributes:
unmaskedValue is updated from a custom attribute
But (when the input loses focus) the console operator, saying that the airbill in the carrier.ts file has been updated, does not work when I exit the input window:
This does not work:
console.log ('Airbill has been installed!');
This seems to show me that the binding is not really two-way.
Question:
How can I make this binding double-sided? So when I update unmaskedValue inside a user attribute, will it update the binding value in the view model?
Note. As a workaround, I was able to change unmasked-value.bind as a method call ( on-unmasked-value-changed.call="onUnmaskedValueChanged($event) ) and update the value in this method. So I don't need to work this. But I wanted to to know if this is possible for future use.