# How To: View-First Strategy

**URL:** <https://discourse.aurelia.io/t/how-to-view-first-strategy/1596>\
**Category:** Framework Knowledge\
**Created:** [September 3, 2018, 4:27pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596 "2018-09-03T16:27:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TimMc](https://avatars.discourse-cdn.com/v4/letter/t/8491ac/32.png) [@TimMc](https://discourse.aurelia.io/u/TimMc)\
**Post date:** [September 3, 2018, 4:27pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596/1 "2018-09-03T16:27:23Z")

</div>

I’ve been studying Aurelia for a month now, and things are still REALLY fuzzy to me as to how I can go with a more View-First MVVM approach. I used MVVM for 10 years, and found in the end that the ViewModel-First approach only worked well for loading the “Shell” (i.e. the main Page) as it was the VM that needs to load up some pre-reqs for the initial Shell anyway (MenuItems based on Roles, etc.). Afterwards, each child View (a.k.a. ContentPage in a Site) that loaded into the Shell needed to load the View first, then BIND the VM to itself. I know that may sound strange, but it was the only way to make other aspects of the system work correctly (like binding the same VM to multiple Views or ViewPorts on different Pages).

I cannot for the life of me see how Aurelia can support a View-First approach. I am starting to see how to re-create the aspects of PRISM that I liked so much in Silverlight by using Aurelia, and I can definitely see how to make generic IModules that can simply “plug in” to the overall site and Navigation. The only thing it seems I am missing is how do I support a View that actually needs multiple ViewModels bound to it under different “main/root” divs?

I’ve seen these, but they don’t help (or maybe I don’t understand):

- [Multiple views per viewmodel](https://discourse.aurelia.io/t/multiple-views-per-viewmodel/307/2)
- [https://www.sitepoint.com/composition-aurelia-report-builder/](https://www.sitepoint.com/composition-aurelia-report-builder/)

---

<div class="post-metadata">

**Author:** ![TimMc](https://avatars.discourse-cdn.com/v4/letter/t/8491ac/32.png) [@TimMc](https://discourse.aurelia.io/u/TimMc)\
**Post date:** [September 3, 2018, 4:44pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596/2 "2018-09-03T16:44:55Z")

</div>

In other words, why can’t I simply load up a Page, have an element there, and then say “bind it” (NOTE: Most of this is pseudo code and probably doesn’t follow Aurelia syntax):  
\<html\>  
… other page markup  
\<form aurelia-vm="./MyViewModel"\>  
\<input type=“select” items.bind=“model.Users” items.text.bind=“FullName” items.value.bind=“ID”…  
\<input type=“text” value.bind=“model.SelectedUser.FirstName”…  
\</form\>

\<form aurelia-vm="./MySearchViewModel"\>  
\<input type=“text” value.bind=“model.SearchText”…  
\<button click.delegate=“model.Search”…  
\</form\>

This kind of approach gives a View-First (in other words, I can just load a CSHTML page) and then binds it. Yes, there may need to be some small “configure” or other “Page.js” file that needs run in order to get the Aurelia bits loaded, but that could simply be a script-include because it’s so small.

Thoughts?

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [September 3, 2018, 6:02pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596/3 "2018-09-03T18:02:14Z")

</div>

Can you tell us exactly why Compose doesn’t work for your use cases?

[https://aurelia.io/docs/templating/basics#composition](https://aurelia.io/docs/templating/basics#composition)

---

<div class="post-metadata">

**Author:** ![TimMc](https://avatars.discourse-cdn.com/v4/letter/t/8491ac/32.png) [@TimMc](https://discourse.aurelia.io/u/TimMc)\
**Post date:** [September 3, 2018, 7:44pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596/4 "2018-09-03T19:44:59Z")

</div>

I am trying to play with it a bit more. Ideally, I do NOT want to use Templates UNLESS I have a real need for a “Component”. If “compose” is able to just have embedded HTML, so that styling the pages, or so that a “styler” can see what the HTML looks like up-front without have to see all possible “renderings” of a Page, then it might work.

For example:  
\<compose\>  
… (Additional HTML content here inside the CSHTML file without loading a Template)  
\</compose\>

---

<div class="post-metadata">

**Author:** ![TimMc](https://avatars.discourse-cdn.com/v4/letter/t/8491ac/32.png) [@TimMc](https://discourse.aurelia.io/u/TimMc)\
**Post date:** [September 3, 2018, 9:08pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596/5 "2018-09-03T21:08:27Z")

</div>

Maybe all I am looking for is the aurelia.enhance…?

> **[Enhance an existing page with Aurelia](http://patrickwalters.net/enhance-an-existing-page-with-aurelia/)**
>
> Aurelia's Enhance feature Many people use various techniques for improving page load times. One really nice way is to use isomorphic JavaScript, sometimes called universal or many other names. The technique is used to allow the pages to render...

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 3, 2018, 9:28pm UTC](https://discourse.aurelia.io/t/how-to-view-first-strategy/1596/6 "2018-09-03T21:28:47Z")

</div>

It feels like so. Can you give it a try ?