javascript - Aurelia 自定义属性中的双向绑定(bind)

标签 javascript aurelia

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(完整代码可见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!');
}

问题:

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

但是如果在custom-attribute内部进行修改,似乎不会流出。

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

unmaskedValue updated from inside the custom attribute

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

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

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

问题:

我怎样才能实现双向绑定(bind)?这样当我更新自定义属性内的 unmaskedValue 时,它会更新 View 模型中的绑定(bind)值吗?

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

最佳答案

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

关于javascript - Aurelia 自定义属性中的双向绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35658280/

相关文章:

javascript - 使像 lodash 这样的库在 Aurelia 中全局可用的最佳实践是什么?

javascript - Aurelia 仅用于客户端(前端)数据绑定(bind)

javascript - 如何使用 react-native-scrollable-tab-view 从另一个组件切换标签

javascript - Bootstrap 中的 jQuery scrollTop

javascript - 用于验证印度货币的正则表达式模式

javascript - 如果元素被删除,是否不需要中断 setInterval ?

javascript - Canvas 动画/reactjs/with requestAnimationFrame

Aurelia @bindable *更改初始化调用

javascript - Aurelia 的要求元素包括外部资源内联?

javascript - 如何动态更改 aurelia 中的模板/单击以编辑表格行?