router: 2 identical routers mixing their pages

Bug Reports
1

Hi,

I have created a sample app with 2 pages each one with it’s own router.

To reproduce the error:

  • Page 1 --> go to profile

  • Page 1 --> go to data page

  • Click on the Page 2 tab on the bottom of the screen

  • Page 2 --> go to profile

  • Page 2 --> go to data page

  • Click on the Page 1 tab on the bottom of the screen

  • Click “go Back”

Here u are supposed to see the Page 1 profile page but Page 2 profile page is shown.

The code:

MainView.ux

<App>
<JavaScript>

    var Observable = require("FuseJS/Observable");

    var pageControlActivePage = Observable("Page1");

	function page1Click(){
		console.log("click1");
		routerPage1.push("profilePage", {text: "Profile for page 1"});
	}
	function page2Click(){
		console.log("click2");
		routerPage2.push("profilePage", {text: "Profile for page 2"});
	}

    function tab1Clicked(){
        pageControlActivePage.value = "Page1";
    }

    function tab2Clicked(){
        pageControlActivePage.value = "Page2";
    }

	module.exports = {
        tab1Clicked: tab1Clicked,
        tab2Clicked: tab2Clicked,
        pageControlActivePage: pageControlActivePage,

		page1Click: page1Click,
		page2Click: page2Click,
	}
</JavaScript>

<DockPanel>
	<PageControl Active="{pageControlActivePage}">
	    <Page ux:Name="Page1">

            <Router ux:Name="routerPage1" BackButtonAction="None"/>
            <Navigator>
                <StackPanel Background="#f0f" ux:Name="main">
                	<Text Value="Page1"/>
                	<Button Text="Go to profile" Background="#fff" Margin="20">
                		<Clicked Handler="{page1Click}"/>
                	</Button>
                </StackPanel>

                <ProfilePage ux:Template="profilePage" router="routerPage1" />
                <DataPage ux:Template="dataPage" router="routerPage1" />
            </Navigator>

        </Page>

       	<Page ux:Name="Page2">
            <Router ux:Name="routerPage2" BackButtonAction="None"/>
            <Navigator>
                <StackPanel Background="#0ff">
                	<Text Value="Page2"/>
                	<Button Text="Go to profile" Background="#fff" Margin="20">
                		<Clicked Handler="{page2Click}"/>
                	</Button>
                </StackPanel>

                <ProfilePage ux:Template="profilePage" router="routerPage2" />
                <DataPage ux:Template="dataPage" router="routerPage2" />
            </Navigator>
        </Page>
	</PageControl>

    <Panel Dock="Bottom" Height="100">
        <Grid ColumnCount="2">
            <Rectangle Background="#000">
                <Stroke Width="2" Color="#fff"/>
                <Text Value="Page1" TextColor="#fff" Alignment="VerticalCenter" TextAlignment="Center"/>
                <Clicked>
                    <Callback Handler="{tab1Clicked}"/>
                </Clicked>
            </Rectangle>
            <Rectangle Background="#000">
                <Stroke Width="2" Color="#fff"/>
                <Text Value="Page2" TextColor="#fff" Alignment="VerticalCenter" TextAlignment="Center"/>
                <Clicked>
                    <Callback Handler="{tab2Clicked}"/>
                </Clicked>
            </Rectangle>
        </Grid>
    </Panel>
</DockPanel>

</App>

ProfilePage.ux

<StackPanel ux:Class="ProfilePage" Background="#00f">
	<Router ux:Dependency="router" />
	<JavaScript File="profilePage.js" />

	<Text Value="{text}" TextColor="#fff" />

	<Button Text="Go to data page" Background="#fff" Margin="20">
		<Clicked Handler="{goData}"/>
	</Button>

	<Button Text="Go BACK" Background="#fff" Margin="20">
		<Clicked Handler="{goBack}"/>
	</Button>

</StackPanel>

profilePage.js

    var Observable = require("FuseJS/Observable");

var text = Observable("default");

this.onParameterChanged(function(param) {
	text.value = param.text;
});

function goBack(){
	router.goBack();
}

function goData(){
	router.push("dataPage", {text: text.value + " --> Data page"})
}

module.exports = {
	text: text,
	goBack: goBack,
	goData: goData
}

DataPage.ux

<StackPanel ux:Class="DataPage" Background="#f0f">
	<Router ux:Dependency="router" />
	<JavaScript File="dataPage.js" />

	<Text Value="{text}" TextColor="#fff" />

	<Button Text="Go BACK" Background="#fff" Margin="20">
		<Clicked Handler="{goBack}"/>
	</Button>

</StackPanel>

dataPage.js

var Observable = require("FuseJS/Observable");

var text = Observable("default");

this.onParameterChanged(function(param) {
	text.value = param.text;
});

function goBack(){
	router.goBack();
}

module.exports = {
	goBack: goBack,
	text: text
}
2

I have checked that it happens even if i create a different class as long as both routers share the template name

3

Try putitng IsMasterRouter="false" on the Router instances. The default setup assumes there is only one router and it might be the cause of the problems.

4

that’s right… thnx!