Aurelia Routing: Append Views into Tabbed Interface

Question

I'm practically brand new to Aurelia, but over the course of a few days I've picked up the starter template and gone through some video training in Pluralsight. I have a unique vision that I can't seem to decide whether compose element, custom element, or router is best to use for this scenario - or if I need to write something completely custom.

• I prefer to continue using the router because it gives you the URLs and history state. Linking deep within the web app may be necessary.
• When a view / viewmodel is initialized, I want the view appended to the DOM, NOT replaced. The <router-view> element works by replacing the view.
• With each view appended to the DOM, I would like to create a set of tabs representing every view that has been opened so far. Think of any modern text editor, IDE, or even a web browser shows tabs.
• Sometimes it would be necessary to detect whether a view is already rendered in the DOM (viewmodel + parameter) and just bring that view to the front -vs- appending the new one.

Do you have any suggestions, examples, etc for someone relatively new to Aurelia, SPAs, and MVVM?

Thank you.

Answer 1

I believe the easiest way is using the compose element. You would need an array containing all screens, and another array to hold the opened screens. Something like this:

 screens = [
    { id: 1, name: 'Test 1', view: './test-1.html', viewModel: './test-1' }, 
    { id: 2, name: 'Test 2', view: './test-2.html', viewModel: './test-2' }
  ];

  _activeScreens = [];

  get activeScreens() {
    return this.screens.filter((s) => this._activeScreens.indexOf(s.id) !== -1);
  }

In the HTML you just have to use <compose></compose> for each iteration of activeScreens.

I made this example https://gist.run/?id=c32f322b1f56e6f0a83679512247af7b to show you the idea. In my case, I've used an html table. In your case, you could use a tab plugin, like Bootstrap or jQuery.

Hope this helps!