UPDATE:它看起來這是一個已知的bug:https://github.com/aurelia/templating/issues/253
我離開這裏以供參考/可搜索的目的。雙向在奧裏利亞自定義綁定屬性
的代碼:
輸入mask.ts(全代碼可以看出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"/>
更新:要解決此錯誤,請更改爲
unmasked-value.two-way
,並且綁定將起作用。
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!');
}
問題:
的數據似乎流入@bindable
變量就好了。隨着蒙版更改,自定義屬性中的值將更改。
但是,如果在自定義屬性中進行更改,它似乎不會流出。
示例場景: 我編輯輸入框中的值之後,並退出輸入時,focusout
事件觸發,並且表明未屏蔽值從自定義打印內部屬性更新控制檯聲明:
unmaskedValue從自定義內更新的屬性
但(當輸入失去焦點)控制檯聲明稱,airbill
上carrier.ts文件進行了更新,當我退出輸入框不火:
這不火:
的console.log(「!空運單設置」);
這似乎向我顯示綁定不是真正的雙向。
問題:
我怎樣才能使這種結合雙向?因此,當我更新unmaskedValue
內部的自定義屬性時,它將更新視圖模型中的界限值?
注意:作爲解決方法,我可以將unmasked-value.bind
更改爲方法調用(on-unmasked-value-changed.call="onUnmaskedValueChanged($event)
)並更新該方法中的值。所以我不需要這個工作。但我想知道是否有可能用於未來。
看起來這是一個已知的bug: https://github.com/aurelia/templating/issues/253 – Vaccano
將HTML中的綁定更改爲'.two-way'(而不是'.bind')可以解決此問題。 – Vaccano
看起來這個問題已關閉,您是否可以按照您現在的方式使用它,而無需解決方法? –