Aurelia if.bind在repeat.for中未更新 [英] Aurelia if.bind inside repeat.for is not updating

问题描述

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

I have a strange case in an Aurelia template of elements with if.bind inside a repeat.for not being shown/hidden when their underlying property is changed. With the following code, the edit fields should be shown and the edit button should be hidden as soon as the edit button is clicked. Subsequently, both the save and undo buttons should hide the edit fields and show the edit buttons again.

MyList.ts:

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:

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>

单击编辑按钮不执行任何操作.有趣的是，如果我添加

Clicking the edit button does nothing. Interestingly, if I add

${isEditing}

repeat.for之外的模板中的任何位置，代码均按预期工作.好像渲染引擎不知道要重新渲染重复循环中的元素.

Anywhere in the template outside the repeat.for, the code works as expected. It's as if the rendering engine doesn't know to re-render elements inside the repeat loop.

这是一个错误吗?还是我在做傻事?

Is this a bug? Or am I doing something silly?

推荐答案

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

This is weird. I created a gist from your code and as you said it wasn't working. No errors in the console either.

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

But when I initialized isEditing it started working

isEditing: boolean = false;

更新了要点

在@Balázs的注释中:通过不初始化isEditing，该属性实际上不存在-可以用于自动完成/IntelliSense，但实际上不存在于目的.您可以通过将edit方法中的console.log调用替换为console.log(this.editing);来验证，您将看到它是undefined.由于它是undefined，因此Aurelia无法对其进行subscribe(因为好像它甚至不存在-不存在getter/setter)，因此无法知道何时(如果有的话)变为现实.但是，即使将其显式设置为undefined也与此不同，因为这确实创建了属性，其值恰好设置为undefined.

From @Balázs in the comments: By not initializing the isEditing, that property virtually does not exist -- it can be used for autocompletion/IntelliSense, but it is not actually present on the object. You can verify that by replacing the console.log call in the edit method with console.log(this.editing);, you will see that it is undefined. By it being undefined, Aurelia cannot subscribe to it (because it is as though it wasn't even there - no getter/setter exists), and therefore has no way of knowing when, if ever, it comes to life. However, that even explicitly setting it to undefined is different from this, because that does actually create the property, whose value happens to be set to undefined.

还请注意:

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

Since you are assigning editingItem directly with item here:

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

在editingItem中所做的任何更改也会影响item.因此，即使您undo，更改也将保留到item.因此，在分配给editingItem之前，您应该先执行clone.

Whatever you change in editingItem will affect item as well. So even if you undo, the change will persist to item. So you should do a clone before assigning to editingItem.

这篇关于Aurelia if.bind在repeat.for中未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！