如何在 Aurelia 中为列表中的项目呈现不同的视图？

Question

我目前正在使用 Aurelia 构建仪表板，我对这个框架还很陌生。在仪表板中，我想在列表中包含不同类型的小面板。

我该怎么做？我是否必须在嵌入视图中包含一个开关来决定要呈现哪个视图？如果可以，我该怎么做？

感谢任何指点！ :)

Answer 1

可能值得使用 <compose>。假设您的主要仪表板组件正在引入其他组件，如下所示：

dashboard.html

<template>
  <Component-A />
  <Component-B />
  <Component-C />
  <Component-D />
</template>

我们可以使用 <compose> 和一组元数据重写它，而不是明确列出这些组件：

dashboard.html

<template>
  <div repeat.for=”component in components”>
    <compose view-model=”${component.viewModel}” />
  </div>
</template>

组件数组

export const components = [
    {viewModel:  ‘component-a.js’ },
    {viewModel:  ‘component-b.js’ },
    {viewModel:  ‘component-c.js’ },
    {viewModel:  ‘component-d.js’ }
];

这就是 <compose> 背后的总体思路：动态视图生成。但是这里有一些额外的资源：

如何在 Aurelia 中为列表中的项目呈现不同的视图？

How can I render different views for items in a list in Aurelia?

typescript

aurelia