Init page on multi view layout

Questions
1

I have a multi view layout where each view is a also a tab. When I use this layout, all works as expected (“page-1” is renderd and within this page, I have a router-link to “page-2” which also work):

...
<div class="view view-main tab tab-active" id="view-1">
<!-- I put the page 1 within my view -->
<!-- Other pages are loaded by router ajax and it works -->
<div class="page" data-name="page-1">
..
</div>

</div>
...

But when using this:

...
<div class="view view-main tab tab-active" id="view-1"></div>
...

and load the inital “page-1” also by router, it does not work. The page is rendered empty. My config:

app.views.create("#view-1", {
	    name: "view1",
	    url: '/home/',
	    main: true,
	    xhrCache: true,
	    pushState: true,
	    routes: [
		  {
		    name: 'home',
		    path: '/home/',
		    url: './page-1.html',
		  },
		  {
		    path: '/page-2/',
		     url: './page-2.html',
		  },
	    ],
	});

It does not work. No error is shown in console.

According to

Load pages from server in tab layout?,

it must work. What is wrong?

2

I found the reason why it was not working:

Because I set “pushState” of the “main-view” to true. After setting to false, init page load by ajax works.

The doc says this:

Also if you use pushState hash navigation then it works only for main view’s navigation.

I dont understand. Is this related to this case?

Why does init page with ajax not work, when using “pushState=true”?

Is this ok?

3

With push state view url will be different, you also need to configure pushStateSeparator and pushStateRoot

4

What is the pushStateRoot and pushStateSeparator on this case?

/home/ ?

app.views.create("#view-1", 
{ name: "view1", url: '/home/', main: true, xhrCache: true, 
pushState: true, 
pushStateSeparator: ??,
pushStateRoot: ??,
routes: [ { name: 'home', path: '/home/', url: './page-1.html', }, 
{ path: '/page-2/', url: './page-2.html', }, ], });

I do not know that the “pushStateRoot” must be changed and to what?

5

It must be set to what your document location path probably

6

I dont understand. My document location path is common “index.html” (which is on the root path). Setting this, does not help:

    pushState: true, // if setting true, init ajax page does not work
    pushStateSeparator: "!",
    pushStateRoot: "/",

Setting pushStateRoot: “/home/” does also not work.

So what should I put there? And why does it work when I dont use multi view layout? If I dont use mult-view-layout, then all routes work and pushState=true also works without providing pushStateRoot or pushStateSeparator.

7

what is in your document.location.href when you open an app on init page?

8

I get this in the console when page is rendered:

document.location.href = http://localhost:8080/test/index.html

In this document, I have all my views and each view is created by “componentUrl”. Navigation works, but if I set “pushState=true”, the main-view is not rendered (blank area). Only the tabbar at bottom is shown which is outside of the the main-view (I have routable tabs where each tab is a view, and one of the tab is the main-view).

9

Ok, so almost same as Kitchen Sink which runs at http://localhost:3000/kitchen-sink/. For this configuration will be the following:

pushState: true,
pushStateRoot: '/kitchen-sink/',

and home route path must be just /

In case you always have index.html then:

pushStateRoot: '/test/',

And your home route path must be /index.html.

If you want to cover both cases when there is ‘/index.html’ in url and not, then it needs more bulletproof solution. In case you are using default pushStateSeparator then it will be:

pushStateRoot: location.href.split(location.host)[1].split('#!')[0],

and home route path must be /
But it is better to leave index.html from the url and keep the first option

1 Like
10

Unfortunatley, no solution works.

Try yourself and use this kind of setting:

app.views.create("#master", {
	    name: "master",
	    url: "/master/",
	    main: true,
	    xhrCache: false,
	    pushState: true, // if setting true, init ajax page does not work
	    pushStateRoot: '/', // no difference when using 'test'
	    routes: [
	    	{
	    	    name: "master",
	    	    path: "/master/",
	    	    component: pageMaster,
	    	},
		{
		    name: "detail",
		    path: "/detail/",
		    component: pageDetail,
                 }
                ]

Using this settings under “http://localhost:8080/test/index.html” does not work. It works only, if I set pushState: false.

11

Just checked in Kitchen sink, all works. Home page must be “/“ as I said in my example. When push state is enabled then your route paths must reflect the document location to work

12

With home page you mean:

pushStateRoot: '/'

In my case, it does not work - the component is not rendered within the tab (tab is switched to class="view view-main tab tab-active", but inner component is not rendered, when using pushState=true). I will dig into kitchen sink config and try to find. I will let you know…

13

By home page route i mean what you have in routes:

{
	    	    name: "master",
	    	    path: "/master/",
	    	    component: pageMaster,
	    	},

must be

{
	    	    name: "master",
	    	    path: "/",
	    	    component: pageMaster,
	    	},
1 Like
14

Ok. Only exactly with this setting, pushState=true works:

app.views.create("#master", {
	    name: "master",
	    url: "/",
	    main: true,
	    xhrCache: false,
	    pushState: true, 
            // nothing else works with pushStateRoot, but this:
	    pushStateRoot: location.href.split(location.host)[1].split('#!')[0],
	    routes: [
	    	{
	    	    path: "/",
	    	    name: "master",
	    	    component: master,
	    	},
		{
	    	    path: "/detail/",
		    name: "detail",
		    async(routeTo, routeFrom, resolve, reject) {
			
			...
           })
			}
		    },
		    tabs: [
			{
			    path: '/',
			    id: 'tab1',
			    component: tab1
			},
			{
			    path: '/tab-2/',
			    id: 'tab2',
			    component: tab2
			},
...

pushStateRoot="/" or "test" does not work, it must be location.href.split(location.host)[1].split('#!')[0]. As this view is the main-view, I can use url: "/" for home-url.

Thanks.

1 Like
15

Looking at the result of

console.log(location.href.split(location.host)[1].split('#!')[0])

it prints

/test/index.html

So I can only use this and it works:

pushStateRoot: '/test/index.html'

or this:

pushStateRoot: '/index.html'

(only ‘/test/’ or ‘/’ does not work.)

16

Hello, have you solved it now? I read your answer from beginning to end, but I still don’t. Would you like to send me a source code? Or help me look at my code, thanks, I’m going crazy!

17

Try set to view:
pushStateOnLoad: false