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

问题描述

<块引用>

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

代码:

input-mask.ts(完整代码可以在这里查看)

@customAttribute('输入掩码')@inject(元素)导出类 InputMaskCustomAttribute {@bindable({ defaultBindingMode: bindingMode.twoWay,changeHandler: 'onUnmaskedValueChanged' })unmaskedValue: 任何;onUnmaskedValueChanged(newValue, oldValue) {console.log('unmaskedValue 从自定义属性内部更新');}@绑定掩码:字符串；随附的() {this.eventTarget.on('focusout', (e: any) => {this.unmaskedValue = ($(this.element)).cleanVal()this.fireEvent(e.target, '输入');});}//构造函数、fireEvent 和设置掩码的代码...}

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})运营商:EntityInterfaces.ICarrier；@bindable({ defaultBindingMode: bindingMode.twoWay })格式化的Airbill:字符串；@bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'onAirbillChanged' })空运单:字符串；onAirbillChanged() {console.log('Airbill 已设置！');}

问题:

数据似乎流入 @bindable 变量就好了.随着掩码的变化，自定义属性中的值也会发生变化.

但是如果在custom-attribute内部进行更改，它似乎不会流出.

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

<块引用>

从自定义属性内部更新的 unmaskedValue

但是(当输入失去焦点时)控制台声明说在carrier.ts文件上更新了airbill，当我退出输入框时不会触发:

<块引用>

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

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

问题:

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

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

解决方案

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

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.

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

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!');
}

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.

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

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 updated from inside the custom attribute

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:

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

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

The Question:

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?

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.

解决方案

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

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