小编Lau*_*ila的帖子

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

我的问题是,当列表中有多个项目时,列表的第一项不显示删除按钮. 这是它的外观

这是我对自定义列表组件的代码和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);
  }
}

我的问题是双重的:

• 为什么列表长度发生变化时,第一个列表项不会自动更新？
• 如何使第一项显示删除按钮？