Aurelia自定义属性中的双向绑定 [英] Two-Way binding in an Aurelia Custom Attribute

问题描述

UPDATE：看起来这是一个已知错误： https://github.com/aurelia/templating/issues/253

我将它留在这里作为参考/可搜索目的。

UPDATE: It looks like this is a known bug: https://github.com/aurelia/templating/issues/253
I am leaving it here for reference / searchability purposes.

代码：

input-mask.ts （完整代码可以在这里上看到）

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"/>

更新：解决此错误，更改为 unmasked-value.two-way ，绑定将起作用。

UPDATE: To work around this bug, change 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!');
}

问题：

数据似乎流入 @bindable 变量就好了。随着掩码的更改，自定义属性中的值会更改。

The Problem:

The data seems to flow into the @bindable variable just fine. As the mask changes, the value in the custom attribute is changed.

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

But it does not seem to flow out if changes are made inside the custom-attribute.

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

Example Scenario: After I edit the value in the input box, and exit the input, the focusout event fires and the console statement that indicates that the unmasked Value was updated from inside the custom attribute prints:

unmaskedValue从自定义属性中更新

unmaskedValue updated from inside the custom attribute

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

But (when the input looses focus) the console statement saying that the airbill on the carrier.ts file was updated does not fire when I exit the input box:

这不是火：

console.log（'Airbill已设置！'）;

This does not fire:
console.log('Airbill was set!');

这似乎向我展示绑定不是真正的双向。

This seems to show to me that the binding is not really two-way.

如何双向进行此绑定？那么当我在custom-attribute中更新 unmaskedValue 时，它会更新视图模型中的绑定值吗？

How can I make this binding two-way? So that when I update unmaskedValue inside the custom-attribute it will update the bound value in the view model?

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

Note: As a workaround, I was able change unmasked-value.bind to be a method call (on-unmasked-value-changed.call="onUnmaskedValueChanged($event)) and update the value in that method. So I don't NEED this to work. But I would like to know if it is possible for future use.

推荐答案

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

This known bug have been fixed and closed on Mar 15, 2016 https://github.com/aurelia/templating/issues/253#issuecomment-189394955

这篇关于Aurelia自定义属性中的双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！