javascript - Aurelia - 值输入取决于另一个输入

Question

我有 2 个这样的输入:

HTML

<template>
  Input1
  <textarea name="" value.bind="item.input1" placeholder=""></textarea>

  Input2
  <textarea name="" value.bind="item.input2" placeholder=""></textarea>
</template>

TS 文件

import { MyModel } from '../models/mymodel';
export class MyApp {
    constructor() {
    }

    item: MyModel;

    activate(dto: MyModel) {
        this.item = new MyModel();

    }

}

当我在 Input1 中键入文本时，我想要它, Input2将绑定(bind)到 Input1 中的值, 但是当我删除 Input1 中的文本时, Input2 中的值不会改变。

例如:

我输入 Hello World在Input1 => Input2值将为:Hello World .

如果我更改 Input1值:Hello => Input2值仍为:Hello World

Answer 1

您可以观察您的第一个输入的变化，并在值更改为更长的值时更新另一个输入，如下所示:

import { observable } from "aurelia-binding";

export class MyModel {
  @observable()
  public input1: string;
  public input2: string;

  public input1Changed(newValue, oldValue) {
    if (!oldValue || (newValue && newValue.length > oldValue.length)) {
      this.input2 = newValue;
    }
  }
}

使用 observable 装饰器和约定命名的方法 input1Changed ([property]Changed)，您可以监听变化并使用新旧值随心所欲。