[英]Two-Way binding in an Aurelia Custom Attribute
更新:看起来这是一个已知的错误: https : //github.com/aurelia/template/issues/253
我将其留在此处以供参考/可搜索性目的。
input-mask.ts (完整的代码可以在这里看到)
@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"/>
更新:要变通解决此错误,更改为
unmasked-value.two-way
,绑定将起作用。
载体
@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!');
}
数据似乎很好地流入了@bindable
变量。 随着蒙版的更改,自定义属性中的值也会更改。
但是,如果在自定义属性内进行更改,它似乎不会消失。
示例场景:在输入框中编辑值并退出输入后,将触发focusout
事件,并显示控制台语句,该语句指示从自定义属性内部更新了未屏蔽的Value:
unmaskedValue从自定义属性内部更新
但是(当输入失去焦点时)控制台语句说,当我退出输入框时, airbill
文件上的airbill
已更新不会触发:
这不会触发:
console.log('Airbill已设置!');
这似乎向我表明,绑定实际上不是双向的。
我该如何进行双向绑定? 这样,当我在自定义属性内更新unmaskedValue
时,它将更新视图模型中的绑定值吗?
注意:作为一种解决方法,我可以将unmasked-value.bind
更改为方法调用( on-unmasked-value-changed.call="onUnmaskedValueChanged($event)
)并更新该方法中的值。所以我不t需要此功能,但我想知道将来是否可以使用。
此已知错误已于2016年3月15日修复并关闭https://github.com/aurelia/templating/issues/253#issuecomment-189394955
尝试使用默认值初始化变量unmaskedValue。 尝试null,undefined,''等。 我以前做过,但是我不记得是哪个版本(肯定是beta版)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.