Aurelia Routing: Adding Views to a Tabbed Interface

Question

I'm practically new to Aurelia, but within a few days I took the starter template and went through a few video training sessions at Pluralsight. I have a unique vision that I seem to be unable to decide if it is better to use this script to create an element , user element or router - or I need to write something completely ordinary.

• I prefer to keep using the router because it gives you the URL and state of the history. A connection may be required within the web application.
• When view / viewmodel is initialized, I want the view to be added to the DOM, NOT replaced . The <router-view> element works by replacing the view.
• With each view added to the DOM, I would like to create a set of tabs representing each view that is still open. Think of any modern text editor, IDE, or even a web browser that displays tabs.
• Sometimes it is necessary to determine whether the view will already be displayed in the DOM (parameter viewmodel +) and just bring this view to the front -vs- adding a new one.

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

Thanks.

Answer 1

I believe the easiest way is to use the compose element. You will need an array containing all the screens, and another array to keep the screens open. Something like that:

  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 HTML, you just need to use <compose></compose> for each iteration of activeScreens .

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

Hope this helps!