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):
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>
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.
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>