Question

我目前正在尝试使用aurelia

复制以下句柄语法

<td><span>{{#each person.colours}}{{name}}{{#unless @last}}, {{/unless}}{{/each}}</span></td>

我知道html元素有repeat.for属性，但在这种情况下我不想重复任何元素。

所以给出了下面形状的对象：

{
    firstName: "John",
    lastName: "Doe",
    colours: [
        {
            id: 1,
            name: "Red"
        },
        {
            id: 2,
            name: "Green"
        }
    ]
}

应生成以下输出：

<td><span>Red, Green</span></td>

Answer 1

<require from="./colour-names-value-converter"></require>

<td><span>${person.colours | colourNames}</span></td>

<强>颜色名称 - 值converter.js

export class ColourNamesValueConverter {
  toView(colours) {
    return colour.map(c => c.name).join(', ');
  }
}

Answer 2

试试这个：

get colours() {
  return this.item.colours.map(colour => colour.name).join(', ');
}

<td><span>${colours}</span></td>

Answer 3

这是我的临时解决方案，它的工作方式与Fabio Luz提示的方法相同，因此在视图模型上提供了计算结果的方法。

colours(person: IPerson) {
  return person.colours.map(colour => colour.name).join(', ');
}

然后在模板中将person传递给方法：

<td><span>${colours(person)}</span></td>

结果

<td><span>Red, Green</span></td>

如果有人想出一个答案，可以在模板中像把手那样完成，我会将其标记为答案。

如何在aurelia模板中迭代集合

3 个答案: