Aurelia if.bind inside repeat.for not updating

Question

I have a strange case in the Aurelia template of elements with if.bind inside repeat.for not showing / hiding when their base property changes. Editing fields should appear in the following code, and the edit button should be hidden immediately after clicking the edit button. Subsequently, the save and cancel buttons should hide the edit fields and display the edit buttons again.

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>

Pressing the edit button does nothing. I wonder if I add

${isEditing}

Anywhere in the template outside of repeat.for, the code works as expected. It is as if the rendering engine does not know to re-render elements inside a repeat loop.

This is mistake? Or am I doing something stupid?

Answer 1

. gist , , . .

isEditing,

isEditing: boolean = false;

gist

@Balázs : isEditing, - /IntelliSense, . , , console.log console.log(this.editing);, , undefined. undefined subscribe ( , - / ), , , -, , , undefined, , , undefined.

:

editingItem item :

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

, editingItem, item. , undo, item. editingItem clone.