javascript - 更新 Aurelia 自定义属性中的绑定(bind)

Question

代码:

我的 View 模型.html

<input on-scan.bind="onAirbillScanned" value.bind="airbill"/>

扫描时.ts

attached() {
    var scannerOptions = { onComplete: this.onScan.bind(this), preventDefault: true };
    (<any>$(this.element)).scannerDetection(scannerOptions);

    -- Code to add a signal to the value binding.
}

onScan(scannedValue, data) {
    if (typeof (this.value) == 'function') {

        let updatedScanValue = this.value(scannedValue);
        if (updatedScanValue !== undefined)
            this.element.value = updatedScanValue;
        else
            this.element.value = scannedValue;

       -- Code to Call the Signal

    }
}

问题:

我有一个自定义属性，允许我检测扫描、修改扫描输入的数据并将其设置为输入元素的值。

但是，我需要用更新后的值更新 aurelia。

我可以触发一个“输入”事件来实现这一点。但是当随机“输入”事件被触发时，我发现了副作用。

我宁愿使用此处概述的信号系统:http://aurelia.io/docs.html#/aurelia/binding/1.0.0-beta.1.1.3/doc/article/binding-binding-behaviors

但问题是我需要信号在 value.bind 绑定(bind)上。

问题:

有没有办法(使用我对绑定(bind)打开的 element 的访问权限)更新 value.binding 以发出我可以调用以获取更新的绑定(bind)？

基本上我正在寻找这样的东西:

addSignal(element, property, signal) {...}

..

addSignal(this.element, 'value', 'scanFinished');

它会将输入的值绑定(bind)更新为如下所示:

<input on-scan.bind="onAirbillScanned" value.bind="airbill & signal: 'scanFinished'"/>

但不仅仅是重写 html，它还必须更新 Aurelia 才能了解信号。

或者 Aurelia 是否为此类场景的所有绑定(bind)添加了一个信号值？

注意:如果所有 aurelia 绑定(bind)都定义了一个 AureliaBinding 信号，那么您可以定位该控件并发送一个除了更新绑定(bind)之外没有任何副作用的事件。

p>

Answer 1

我认为您遇到了麻烦，因为您正处于从自定义属性切换到使用自定义元素的方法的转折点。

您可以通过执行以下操作来规避整个问题:

scanner.html

<template>
  <input ref="input" value.bind="value">
</template>

扫描器.js

import {bindingMode} from 'aurelia-framework';

export class Scanner {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
  @bindable scanModifier = x => x;
  input: HTMLInputElement;

  attached() {
    let scannerOptions = {
      onComplete: value => this.value = this.scanModifier(value),
      preventDefault: true
    };
    (<any>$(this.input)).scannerDetection(scannerOptions);
  }

  detached() {
    (<any>$(this.input)).scannerDetection('destroy');
  }
}

用法:

<require from="./scanner"></require>

<scanner value.bind="airbill" scan-modifier.call="onAirbillScanned($event)"></scanner>

这仍然可以通过自定义属性来完成，但这种方式对我来说似乎更自然。你怎么看？