如何爲Aurelia中的列表中的項目呈現不同的視圖？

Question

我目前正在使用Aurelia構建儀表板，並且對於此框架非常新。在儀表板中，我想在列表中包含不同類型的dashlets。

我該怎麼做？我是否必須在嵌入視圖中包含一個開關，確定要渲染哪個視圖？如果是這樣，我該怎麼做？

任何指針表示讚賞！ :)

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/