Aurelia构图，使用不同的视图模型与相同的视图

Question

我有一个案例，我想使用一个特定的模板文件，例如template-file.html用于一组不同的视图模型。

为了确定要与视图一起加载的视图模型，我使用了一个JSON配置文件。

我有以下示例：主页面.ts:

export interface Model {
model: string;
x: number;
y: number;
}
export class MainPage
{
configuration: Model[];
constructor()
{
this.configuration = [
{
model: 'simple-view',
x: 800,
y: 200
},
{
model: 'advanced-view',
x: -200,
y: 0
},
{
model: 'simple-view',
x: -1000,
y: -400
}
];
}
}

使用以下模板：

<template>
<require from="./modules/simple-view"></require>
<require from="./modules/advanced-view"></require>
<svg>
<g class="models">
<compose repeat.for="config of configuration"
view="./modules/template.html"
view-model="./modules/${config.model}"
model.bind="config"
containerless>
</compose>
</g>
</svg>
</template>

现在，我想在这里实现的是，基于配置中的模型属性，加载不同的typescript类，但始终使用相同的HTML模板文件。然而，现在它给我的错误是，它找不到相应的视图。

在线搜索只给了我一些用例，在这些用例中，你可以只使用一个视图进行组合，但我还没有找到一个示例或解决方案，允许你为不同的视图模型指定一个模板html文件。

这可能吗？如果是，compose元素是否适合此作业？

非常感谢您的帮助。

谨致问候，Jan Jaap

Answer 1

我的第一个想法是，您可能正在使用Webpack，如果是这样，Webpack需要DI那些组合模块，如PLATFORM.moduleName('./my-vm.ts')。另一个考虑因素是，您需要知道需要加载的所有可能的组合，以便用PLATFORM.moduleName()"预加载"那些可以在视图模型中"预加载的"模块。

以下是一个webpack动态合成切换器的示例：https://codesandbox.io/s/aurelia-typescript-sandbox-wyp9g