router in a live page

How-to Discussions
#1

Hi,

after 0.29 we can create live pages and not just templates in a navigator / router. My question is: how do i call the router inside the live page js ?

For example:

 <Router ux:Name="myRouter" BackButtonAction="None"/>
            
 <Navigator>
   <Page Name="page1">
     <ux:Include File="Page1.ux" />
   </Page>

   <TemplatePage      ux:Template="templatePage"  router="myRouter" />
 </Navigator>

TemplatePage class would look similar to:

<Panel  ux:Class="TemplatePage">
    <Router ux:Dependency="router" />
    <JavaScript File="templatePage.js" />

so i would be able to call router.push from the templatePage.js

my question is: how do i call the router from the Page1.js (that would be declared in the Page1.ux) ?

#2

Hi!

This works the same as for when you use ux:Template. Here is an example:

<App>
	<Panel>
		<Router ux:Name="router" />
		<Navigator DefaultTemplate="page1">
			<Page ux:Name="page1" Color="Yellow">
				<JavaScript>
					function pushPage2() { router.push("page2"); }

					module.exports = { pushPage2 };
				</JavaScript>
				<Button Text="Page2" Clicked="{pushPage2}"/>
			</Page>
			<Page ux:Name="page2" Color="Red">
			</Page>
		</Navigator>
	</Panel>
</App>
#3

Hi!

that’s what i expected but in my app i got a “router is not defined”… but i will check and if i’ll upload a an example if i don’t find the error.

thnx!

#4

Make sure you do
myRouter.push
and not
router.push

in that case. Since the name of your router is myRouter

#5

yes i did (actaully i got a "myRouter is not defined)

I saw where is the error but i guess it may be a bug (i did a workaround) as it depends on when i call “myRouter.push” inside the page1.js (in one function it works in the other i get the “myRouter is not defined” (same code))

Can u pls tell me where can i upload an example?

#6

Its quite hard to help since i have no idea whats behind your ux:Include

<ux:Include File="Page1.ux" />

Repro cases can be uploaded here :