javascript - Aurelia 绑定(bind) - 单击按钮返回查看模型

Question

在 Aurelia 应用程序中，我有一个带有单个输入的“重命名”表单

<input ... value.bind="something.name" />

和两个按钮:Save 和 Cancel。

相同的 something 对象已在其他控件中使用。因此，在单击 Save 按钮之前，我不希望更改 name。

是否有一个很好的声明方式来完成它，或者我是否必须将 name 复制到另一个属性，然后在 Save 触发器上将其复制回来？

Answer 1

您可以为您的编辑弹出窗口创建一个模型对象，并且仅在单击保存 时复制对列表中的项目所做的编辑。这是一个简化的示例:https://gist.run/?id=af3af031c5acc4c46407679f5ab1376b

查看

<template>
  <ul>
    <li repeat.for="person of people">${person.firstName} ${person.lastName} <button click.delegate="editPerson(person)">Edit</button></li>
  </ul>
  <div if.bind="editing">
    First Name: <input type="name" value.bind="editModel.firstName" />
    Last Name: <input type="name" value.bind="editModel.lastName" />
    <button click.delegate="savePerson()">Save</button>
    <button click.delegate="cancelEdit()">Cancel</button>
  </div>
</template>

View 模型

export class App {
  editing = false;
  people = [
    { firstName: 'John', lastName: 'Doe' },
    { firstName: 'Jane', lastName: 'Smith' },
    { firstName: 'Bob', lastName: 'Smith' }
  ];

    editPerson(person) {
      this.editing = true;
      this.editObject = person;
      this.editModel = Object.assign({},person);
    }
    savePerson() {
      this.editing = false;

      Object.assign(this.editObject, this.editModel);

      this.editObject = null;
      this.editModel = null;
    }

    cancelEdit() {
      this.personBeingEdited = null;
      this.editing = false;
    }
}