Aurelia if.bind里面的repeat.for没有更新

Question

我在一个Aurelia模板中有一个奇怪的情况,if.bind在一个repeat内部.当它们的底层属性被改变时没有被显示/隐藏.使用以下代码,应显示编辑字段,并在单击编辑按钮后立即隐藏编辑按钮.随后,保存和撤消按钮都应隐藏编辑字段并再次显示编辑按钮.

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

这很奇怪.我从你的代码中创建了一个要点,正如你所说它不起作用.控制台中也没有错误.

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

isEditing: boolean = false;

更新了要点

来自@Balázs的评论:通过不初始化isEditing,该属性几乎不存在 - 它可以用于自动完成/智能感知,但它实际上并不存在于对象上.您可以通过替换console.log编辑方法中的调用来验证它console.log(this.editing);,您将看到它undefined.通过它undefined,Aurelia不能subscribe这样(因为它好像它甚至不存在 - 没有吸气剂/固定剂存在),因此无法知道它何时,如果它,它来到生活.但是,即使显式设置它undefined也与此不同,因为它实际上创建了属性,其值恰好设置为undefined.

另请注意:

由于您editingItem直接在item此处分配:

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

无论你改变什么editingItem都会影响item.所以,即使你undo,这种变化也会持续下去item.所以你应该clone在分配之前做一个editingItem.