Ons-navigator to load a different page according to hash

[rcpinheiro]

I’m trying to load a particular page according to the URL hash (for instance: domain.com/#user1, domain.com/#user2). Those pages usually are clickable in the home page (“home.html”).
This is my navigator definition:

<ons-template id="homeNav.html">
  <ons-page id="homeNav">
    <ons-navigator id="myNavigator"></ons-navigator>
  </ons-page>
</ons-template>

So in the initialization I’ve tried to load the page according to the hash:

document.addEventListener("init", function(event)
{
    if (event.target.id=="homeNav") {
        var myNavigator=document.getElementById('myNavigator');
		myNavigator.page="home.html";
		if (URL hash meets a certain condition...) {
			myNavigator.pushPage("user.html",{ data: { user:... }}).then(function() {
				// load user details
			});
		}
	}
}

Although this works (the user details appear) there is no way to go to the homepage - ons-back-button doesn’t appear since the page stack only has one page (“user.html”). I’ve tried manipulating the page stack with insertPage and bringPageTop, etc, and nothing seems to work.
So, to recap, what I wanted was to create this page navigation stack:

0: home.html (home page)
1: user.html (top page)

Any ideas on how to achieve this?
Thanks in advance!

[asialgearoid]

navigator.page is only used when the navigator is initialised. You are setting it inside the init callback, so by that point I expect that the navigator has already initialised.

You should instead set page on <ons-navigator>:

<ons-navigator id="myNavigator" page="home.html"></ons-navigator>

If you don’t always want this as the default page, you could try instead to push the page with no animation:

myNavigator.pushPage('home.html', { animation: 'none' });

[rcpinheiro]

@asialgearoid Thanks for the reply.

After much trial and error, I finally solved the problem:

myNavigator.pushPage('home.html', { animation: 'none' }).then(function() {
    myNavigator.pushPage("user.html",{ animation: 'none', data: { user:... }}).then(function() {
        ... load user details ...
    });
});

It’s ugly but it works. The promise is needed or only home.html will appear.

I think there is a bug in Ons-navigator. Defining a “page” then pushing a page in the initialization should work. Imho, of course.