Best practice for Master/Detail pages using ViewPorts?

#1

In the Aurelia documentation on ViewPorts, the use an example that would imply a screen in which you have a list of items on the left and the detail of a selected item on the right.

config.map([
    { route: 'users', name: 'users', viewPorts: { left: { moduleId: 'user/list' }, right: { moduleId: 'user/detail' } } }
  ]);

In my mind, the VM for each ViewPort would have its own model. The left VM would have a users array and the right VM might have a user. However, if the user of the application selected a different user from the list, the detail would need to update.

I’m curious how this works with multi-viewports. Do you have to use events and the eventaggregator to communicate between the two viewports and VMs or is there some other means of accomplishing this?

1 Like
#2

Maybe @jods4 or someone can help comment :smile:

For me, I normally use hierarchical router viewports only. It’s more straight forward to think/reason about sometimes. At the beginning of a project, just need to lay a routing table with all possible routes and good to go (far).

#3

You can take a look at https://vimeo.com/ondemand/beginningaurelia/180217788?autoplay=1

If I remember correcly it use a list on a side you can pick and display the details, should be explained in this video

1 Like