Accessing main UX variables from multiple JS files (0.20)

How-to Discussions
1

Hi,

I am quite lost with the 0.20 changes:

how do i access an UX component (in this case: “mainRouter”) from a JS file (in this case: “home.js”) that is not the one declared in the MainView.ux ?

I get: mainRouter is not defined in the home.js back() function.

MainView.ux:

<App>
<Router ux:Name="mainRouter" />

<JavaScript File="main.js"/>

<Panel ux:Class="LoginPage" Background="#f0f">
    <Router ux:Dependency="router" />
    <Text Value="loginpage"/>
    <Clicked Handler="{next}"/>
</Panel>

<Panel ux:Class="HomePage" Background="#ff0">
    <Router ux:Dependency="router" />
    <Text Value="homepage"/>
    <Clicked Handler="{back}"/>
</Panel>

<Navigator DefaultTemplate="login">
    <LoginPage ux:Template="login" router="mainRouter" />
    <HomePage  ux:Template="home"  router="mainRouter" />
</Navigator>
</App>

main.js:

var home = require("/home");

function next(){
    mainRouter.push("home");
}

module.exports = {
    next: next,
    back: home.back,
}

home.js:

function back(){
    mainRouter.goBack();
}

module.exports = {
    back: back
}
2

Here it’s very well explained :slight_smile:

https://www.fusetools.com/docs/navigation/navigation

i just had to add the .js to each Class