javascript - 如何跟踪 aurelia 中表单对象的更改以激活恢复按钮

Question

我们正在使用 Aurelia 来创建一个单页应用程序，在其中创建/编辑员工详细信息。在编辑员工表单中，我们需要提供恢复本地更改(如果有)的功能。但诀窍是如果没有本地更改，则禁用按钮

我尝试使用compulatedFrom，但它只观察属性而不是复杂对象。

这是一个示例代码-

import {bindable, computedFrom} from 'aurelia-framework'


export class Employee {
  @bindable employee
  
  @computedFrom('employee')
  enableRevert() {
    return true;
  }
  
  revert() {
   // revert functionality goes here
  }
}

感谢您的帮助!

Answer 1

employee.html

<button disabled.bind="!hasChanged()">Revert</button>

employee.js

attached() {
    Object.assign(this.originalEmployee, employee);
}

hasChanged() {
    // Like @Favio said, iterate over an original copy of the employee object.
    for (let p in employee) {
        if (employee[p] !== this.originalEmployee[p]) {
            return true;
        }
    }

    return false;
}