Aurelia composition, use different view-models with the same view

Question

I have a case where I want to use a specific template file, eg template-file.html for a set of different view models.

To determine the view-model to load with the view I use a JSON configuration file.

I have the following example: 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
      }
    ];
  }
}

With the following template:

<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>

Now what I want ot achieve here, is that based on the model property in the configuration a different typescript class is loaded, but always with the same HTML template file. Now however, it gives me errors that it cannot find the corresponding view.

Online search only give me use cases where you can compose with only a view, but I have not found an example or solution that allows you to specify a single template html file for different view models.

Is this even possible? If so, is the compose element the right element for this job?

Any help is much appreciated.

Regards, Jan Jaap

Answer 1

My first thought is that you might be using Webpack and if so, webpack needs to DI those composition modules such as PLATFORM.moduleName('./my-vm.ts') . The other consideration is that you'll need to know all the possible combinations you'll need to load in order to "preload" those modules with PLATFORM.moduleName() which could be "preloaded" in your viewmodel.

Here's an example for a webpack dynamic composition switcher: https://codesandbox.io/s/aurelia-typescript-sandbox-wyp9g