Multiple views per viewmodel

1

Hey, I’m having another ‘(how) is this possible’ question for aurelia:

Simple put: “is it possible to have multiple views for the same viewmodel”? Say I have a viewmodel called “DataViewModel”.

Now this data contais a student ID, an portrait picture, a name an adress. And the viewmodel makes those accessible for the view.

Now this viewmodel used by different views (at different times during the lifecycle of the application): one view would display “thumbnail + alttext”. While another would be a list-item that display detailed data.

In aurelia it seems everything is view-centered instead of viewmodel-centered, to use a “custom element” I have to create x.html and x.js/ts. And I’d add it by first adding an event:

<thumb_student_view student.bind="theStudent"></thumb_student_view>

Yet if I wish to use creat a different view (or even rename my viewmodel files so they are clearly different from the views, and even in a different folder), I’d also have to create another viewmodel? That seems rather silly. - Can’t I do something like:

<thumb_student_view view-model="student_view_model" student.bind="theStudent"></thumb_student_view>
2

I believe you can use the compose element for this.

3

Example for <compose />. Just make your DataViewModel more of a parent VM and then based on some model/var you can dynamically change to different Views. You can create ViewModelLess with <compose view="${myView}.html"></compose> or for more complicated views that need a ViewModel, <compose view-model="${myViewModel}"></compose>. Then just bind whatever data the composed views need like <compose model.bind="myModel" view-model="${myViewModel}"></compose>

4

Here’s an old article that, I think, describes exactly what you want to do.