Aurelia自定义属性中的双向绑定

Question

更新: 看起来这是一个已知的错误:https://github.com/aurelia/templating/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绑定将起作用.

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很好地流入变量.随着掩码更改,自定义属性中的值将更改.

但是,如果在custom-attribute中进行了更改,它似乎没有流出.

示例场景: 在我编辑输入框中的值并退出输入后,focusout事件将触发,并且控制台语句指示从自定义属性内部更新了未屏蔽的值:

unmaskedValue从自定义属性内部更新

但是(当输入失去焦点时)控制台语句说airbill当载体.ts文件更新时,当我退出输入框时不会触发:

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

这似乎告诉我,绑定不是真正的双向.

问题:

我怎样才能双向绑定？那么当我unmaskedValue在custom-attribute里面更新时,它会更新视图模型中的绑定值？

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

Answer 1

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