typescript - 如何在 Aurelia 中为列表中的项目呈现不同的 View ？

Question

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

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

感谢任何指点! :)

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> 背后的总体思路: 动态 View 生成。然而，这里有一些额外的资源:

• http://www.sitepoint.com/composition-aurelia-report-builder/
• http://ilikekillnerds.com/2015/10/aurelia-dynamic-composition/