更新 Aurelia 自定义属性中的绑定

Update a binding in an Aurelia custom attribute

本文关键字：绑定 自定义属性 Aurelia 更新      更新时间：2023-09-26

代码：

我的视图模型.html 

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

扫描时

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
    }
}

问题：

我

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

但是，我需要用更新的值更新奥雷利亚。

我可以触发一个"输入"事件来实现这一目标。 但是我发现了触发随机"输入"事件的副作用。

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

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

问题：

有没有办法（使用我对绑定所在element的访问权限）来更新value.binding，以获得我可以调用的信号来更新绑定？

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

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

..

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

它将更新输入的值绑定，如下所示：

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

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

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

注意：如果所有 aurelia 绑定都定义了AureliaBinding信号，那就太棒了，这样您就可以针对该控件并发送一个除了更新绑定之外没有副作用的事件。

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

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

扫描仪.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>

这仍然可以使用自定义属性来完成，但对我来说似乎更自然。 你觉得怎么样？

相关文章：