How to use routable tabs with Async Compnent

Questions
1

How can i make something like this work?

{
	path: '/game/:id',
	name: 'game',
	async: function (route, routeFrom, resolve, reject) {
		var game = [
		];
		resolve(
			{
				componentUrl: './pages/game.html',
			},
			{
				context:{
					info : game,
				},
				tabs: [
					{
						path: '/game/:id/',
						id: 'game-feed',
						componentUrl: './pages/game/feed.html',
					},
					{
						path: '/lineup/',
						id: 'game-lineup',
						componentUrl: './pages/game/lineup.html',
					},
					{
						path: '/stats/',
						id: 'game-stats',
						componentUrl: './pages/game/stats.html',
					},
				],
			}
		)
	},
},
2

No, such not supported. Each tab can have async function, but async can’t return all tabs

3

so i must use for the tabs a non-routable tabs solution?

4

How about the :id as soon as i use that, i cant use the routable tabs component.

is there a way to combine both?

5

Each tab can be async loaded separately like:

{
  path: '/tabs-routable/',
  url: './pages/tabs-routable.html',
  tabs: [
    {
      path: '/',
      id: 'tab1',
      async(to, from, resolve) {
        resolve({
          content: '...',
        })
      }
    },
  ]
}
6

yeah but in that case i cant have a link like : /game/23/feed for example. the solution i came up with is not using routable tabs.

7 
{
  path: '/tabs-routable/',
  url: './pages/tabs-routable.html',
  tabs: [
    {
      path: '/:id',
      id: 'tab1',
      async(to, from, resolve) {
        resolve({
          content: '...',
        })
      }
    },
  ]
}

is it possible to make something like this work?

8

Yes, this should work

9

For Some reason, when i try to put Tabs inside routable tabs component it doesnt work. it seems like it deosnt inititiate

<div>	
<div class="toolbar tabbar tabbar-scrollable color-theme-white" style="max-width:initial">
	<div class="toolbar-inner">
		{{#each gameDays}}
		<a href="#day-{{day}}" class="tab-link tab-link-active">
			<small>Tag {{day}}</small>
			{{displayTime date format="D.MMM,"}}
		</a>
		{{/each}}
	</div>
</div>
<div class="content">
	<div class="tabs">
		{{#each gameDays}}
		<div id="day-{{day}}" class="page-content tab tab-active">
			<div class="list virtual-list">
			</div>
		</div>
		{{/each}}
	</div>
</div>
</div>

Unbenannt-1
Unbenannt-1.jpg433×591 45 KB

10

What doesn’t work here?

11

The Tabs are displayed below each other, and i can not click any of the tab buttons

12

Apearently it doesnt work when i use each to create the tabs

13

It is because you have tab-active class on each tab. Should be only on one

1 Like
14

Is it possible to create routable popup with async method?

15 
{
  path:'/some-page/',
  popup:{
    async(routeTo,routeFrom,resolve,reject){
      resolve({
        content:`
          <div class="popup">
            <div class="view">
              <div class="page">
              </div>
            <div>
          </div>`
      });
    }
  }
}