Aurelia if.bind 里面的 repeat.for 没有更新 [英] Aurelia if.bind inside repeat.for is not updating

问题描述

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

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:

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，该属性实际上不存在——它可以用于自动完成/智能感知，但它是实际上并不存在于物体上.您可以验证通过将编辑方法中的 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屋！