如何为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>:动态视图生成.但是这里有一些额外的资源:

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