【问题标题】：Two-Way binding in an Aurelia Custom AttributeAurelia 自定义属性中的双向绑定
【发布时间】：2016-06-10 01:20:36
【问题描述】：

更新： 看起来这是一个已知错误：https://github.com/aurelia/templating/issues/253
我将其留在这里以供参考/可搜索。

代码：

input-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

但是（当输入失去焦点时）当我退出输入框时，控制台语句说载体.ts 文件上的airbill 已更新并不会触发：

这不会触发：
console.log('Airbill 已设置！');

这似乎向我表明，绑定并不是真正的双向。

问题：

我怎样才能使这种绑定双向？这样当我在自定义属性中更新unmaskedValue 时，它会更新视图模型中的绑定值？

注意：作为一种解决方法，我可以将 unmasked-value.bind 更改为方法调用 (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)) 并更新该方法中的值。所以我不需要这个工作。但我想知道它是否可以供将来使用。

【问题讨论】：

看起来这是一个已知的错误：github.com/aurelia/templating/issues/253
在 HTML 中将绑定更改为 .two-way（而不仅仅是 .bind）可以解决此问题。
看起来这个问题已经解决了，你现在可以按照你想要的方式使用它，而不需要解决方法吗？

标签： javascript aurelia

【解决方案1】：

此已知错误已于 2016 年 3 月 15 日修复并关闭 https://github.com/aurelia/templating/issues/253#issuecomment-189394955

【讨论】：

【解决方案2】：

尝试使用默认值初始化变量 unmaskedValue。尝试 null、undefined、'' 等。我以前做过，但我不记得是哪个版本（肯定是测试版）

【讨论】：