模型更改时 Aurelia repeat.for 不刷新

Question

我想用 Aurelia 构建一个简单的自定义组件，允许用户输入一个或多个字符串。当有多个项目时，列表应为列表中的每个项目显示删除按钮。

我的问题是，当列表中有多个项目时，列表的第一项不显示删除按钮。
This is how it looks

这是自定义列表组件的代码和 html:

查看

<template>
  <div repeat.for="item of items">
    <input type="text" value.bind="items[$index]">
    <button click.delegate="remove($index)" 
            if.bind="hasMoreThanOne()">Remove</button>
  </div>
  <button click.delegate="add()">Add</button>
</template>

查看型号

export class List {
  items: string[];

  constructor() {
    this.items = [];
    this.add();
  }

  add() {
    this.items.push("");
  }

  hasMoreThanOne() {
    return this.items.length > 1;
  }

  remove(index) {
    this.items.splice(index,1);
  }
}

我的问题有两个:

为什么列表长度更改时第一个列表项不会自动更新？

如何使第一个项目也显示删除按钮？

Answer 1

Aurelia 处理属于 bind 的任何函数。命令作为纯函数。这意味着在传递给函数的参数发生变化之前，它不会再次调用该函数。由于hasMoreThanOne()有一个返回值会根据不是函数参数的东西而改变(自然，因为函数没有任何参数)，Aurelia 不会再次调用该函数。

Aurelia 在数组更改时不重新评估函数的原因是中继器已优化并且看到数组中的第一项没有更改，因此它只是继续使用它拥有的现有 DOM。使用正确创建的 View ，这有助于大大提高性能，但在您的情况下，它会导致不必要的问题。

通过使用 setter/getter ，您找到了一种处理此问题的非最佳方法。这不是最佳的原因是，默认情况下，Aurelia 每 200 毫秒使用一次脏检查来检查对 getter 的更改。这可以解决您遇到的问题，但对于性能来说并不理想。

考虑到 hasMoreThanOne() 的简单程度，最简单的选项函数是，将简单地在绑定(bind)中内联函数，如下所示:

<template>
  <div repeat.for="item of items">
    <input type="text" value.bind="items[$index]">
    <button click.delegate="remove($index)" 
            if.bind="items.length > 1">Remove</button>
  </div>
  <button click.delegate="add()">Add</button>
</template>

老实说，这就是我可能会处理的方式。

您也可以照常使用 getter，但附加 computedFrom装饰器以防止脏检查:

import {computedFrom} from 'aurelia-framework';

export class List {
  items: string[];

  constructor() {
    this.items = [];
    this.add();
  }

  add() {
    this.items.push("");
  }

  @computedFrom('items.length')
  get hasMoreThanOne() {
    return this.items.length > 1;
  }

  remove(index) {
    this.items.splice(index,1);
  }
}

这将为您提供与我上面使用的内联绑定(bind)完全相同的性能，但需要编写更多代码。