0

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

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

我有以下示例：main-page.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>

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

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

这甚至可能吗？如果是这样，compose 元素是否适合这项工作？

任何帮助深表感谢。

问候， Jan Jaap

4

1 回答 1

0

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

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

于 2019-11-01T20:55:20.503 回答