# Multiple views per viewmodel

**URL:** <https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307>\
**Category:** Uncategorized\
**Created:** [November 5, 2017, 5:42pm UTC](https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307 "2017-11-05T17:42:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pulli23](https://avatars.discourse-cdn.com/v4/letter/p/b4bc9f/32.png) [@pulli23](https://discourse.aurelia.io/u/pulli23)\
**Post date:** [November 5, 2017, 5:42pm UTC](https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307/1 "2017-11-05T17:42:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BrianPAdams](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brianpadams/32/256_2.png) [@BrianPAdams](https://discourse.aurelia.io/u/BrianPAdams)\
**Post date:** [November 5, 2017, 10:28pm UTC](https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307/2 "2017-11-05T22:28:06Z")

</div>

I believe you can use the compose element for this.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 6, 2017, 2:11pm UTC](https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307/3 "2017-11-06T14:11:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BrianPAdams](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brianpadams/32/256_2.png) [@BrianPAdams](https://discourse.aurelia.io/u/BrianPAdams)\
**Post date:** [November 6, 2017, 8:28pm UTC](https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307/4 "2017-11-06T20:28:11Z")

</div>

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

> **[Composition in Aurelia.io: Creating a Report Builder — SitePoint](https://www.sitepoint.com/composition-aurelia-report-builder/)**
>
> Aurelia exposes visual composition as a first-class feature. Vildan Softic explains how this helps you build a complex app out of small reusable components.