repeat.for 内的 Aurelia if.bind 未更新

Question

我在 Aurelia 元素模板中遇到一个奇怪的情况，当 repeat.for 中的 if.bind 元素的基础属性发生更改时，它们不是 shown/hidden。使用以下代码，应显示编辑字段并在单击编辑按钮后立即隐藏编辑按钮。随后，保存和撤消按钮都应隐藏编辑字段并再次显示编辑按钮。

MyList.ts:

import { computedFrom } from "aurelia-binding";

export class MyList
{
  items: any[] = [{
      "firstName": "Joe",
      "lastName" : "Blow",
      "id": 1
    },
    {
      "firstName": "Jane",
      "lastName" : "Doe",
      "id": 2
    }
  ]

  editingItem: any = null
  isEditing: boolean;

  edit(item){
    this.editingItem = item;
    this.isEditing = true;
  }

  editFirst(item){
    this.editingItem = this.items[0];
    this.isEditing = true;
  }

  undo(){
    // undo logic here
    this.editingItem = null;
    this.isEditing = false;
  }

  save(){
    // Save logic here
    this.editingItem = null;
    this.isEditing = false;
  }
}

MyList.html:

<template>
  <table>
    <tbody>
      <tr repeat.for="item of items">
        <td if.bind="!isEditing">
          <button click.delegate="edit(item)">Edit</button>
        </td>
        <td>${item.firstName}</td>
        <td>${item.lastName}</td>
        <td if.bind="isEditing && editingItem.id == item.id">
          <button click.delegate="save()">Save</button>
          <button click.delegate="undo()">Undo</button>
          <input value.bind="editingItem.firstName" />
          <input value.bind="editingItem.lastName" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

点击编辑按钮没有任何反应。有趣的是，如果我添加

${isEditing}

模板中 repeat.for 之外的任何地方，代码都按预期工作。就好像渲染引擎不知道在重复循环中重新渲染元素一样。

这是一个错误吗？还是我在做什么傻事？

Answer 1

这很奇怪。我 created a gist 来自你的代码，正如你所说，它不起作用。控制台也没有错误。

但是当我初始化时 isEditing 它开始工作了

isEditing: boolean = false;

Updated gist

来自@Balázs 的评论：通过不初始化 isEditing，属性实际上不存在——它可以用于 autocompletion/IntelliSense，但它实际上并不存在于对象上。您可以通过将编辑方法中的 console.log 调用替换为 console.log(this.editing); 来验证，您将看到它是 undefined。由于它是 undefined，Aurelia 不能 subscribe 到它（因为它就好像它甚至不存在 - 不存在 getter/setter），因此无法知道何时，如果永远，它来生活。但是，即使明确将其设置为 undefined 也与此不同，因为这确实创建了属性，其值恰好设置为 undefined.

另请注意：

由于您在这里直接用 item 分配 editingItem：

edit(item){
    this.editingItem = item;
    this.isEditing = true;
  }

您在 editingItem 中所做的任何更改也会影响 item。所以即使你undo，变化也会持续到item。所以你应该在分配给 editingItem.

之前做一个 clone

repeat.for 内的 Aurelia if.bind 未更新

Aurelia if.bind inside repeat.for is not updating

aurelia