如何迭代 aurelia 模板中的集合

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

试试这个：

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

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

Answer 2

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

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

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

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

结果

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

如果有人提出允许在模板中完成此操作的答案，如车把，我会将其标记为答案。

Answer 3

<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(', ');
  }
}

如何迭代 aurelia 模板中的集合

How do I iterate over collection in aurelia templates

javascript

templates

handlebars.js

aurelia