Creating a new Page Instance

How-to Discussions
1

When I use the Router to go to a sub page (via push) I wanted to effectivly relaod the page so that the old page data is removed and the javascript body is rerun (so that it can fetch refreshed data from a server)

//Main.ux

<Router ux:Name="router" />
...
<Navigator DefaultTemplate="Page1" Padding="4" ux:Name="TheNav">
	<Page1 ux:Template="Page1" router="router" Title="Page 1"/>
	<Page2 ux:Template="Page2" router="router" Title="Page 2"/>
	<SubPage1 ux:Template="SubPage1" router="router" Title="Sub Page" />
</Navigator>

//Page2.ux

<Page ux:Class="Page2">
    <Router ux:Dependency="router" />
    <JavaScript>
        exports.gotoSubPage = function() { router.push("SubPage1"); } 
    </JavaScript>

    <StackPanel>
        <Text>Page 2</Text>
        <Button Text="Nav to sub page" Clicked="{gotoSubPage}"/>
    </StackPanel>
</Page>

But when I go back from the SubPage using router.goBack() and then press the Nav to sub page button the previous state of the Subpage is there. I need either a new sub page instance or a way to clean its state and re-run the javascript on entering the page.

What is the best way to do this?

FYI: it seems to re-create after I clear the navigation stack using router.goto, so therefore the subpage is still on the stack (albiet ahead). How do I remove the subpage from the stack without going back to the root using router.goto?

2

I have the exact same problem. When i try to load a new instance of a profilepage it always brings back the first one i visited with the same information. Have you solved this problem?

3

It’s expected that the pages you .push() to are reused when possible. That’s good on memory.

The instance of a given page will be “recreated” when the params on it change. Think of it this way - if you push to a page with a given ID, and you fetch some data based on that ID, why would you re-fetch stuff when you land on that same page with the same params?

So that’s what you have to work with. One trick you can use to force param change is passing a random string with every .push(), like so: router.push("somePage", {id: 15, random: btoa("rnd" + Date.now())});

4 
onSwipeProfile = function(args){

var contains = false;
fromUid = args.data.fromUid;
for(var i = 0; i<testList.length; i++) {
    if(testList.getAt(i).id == args.data.fromUid){
        contains = true;
        router.push("ViewProfile", {id: fromUid, random: testList.getAt(i).rnd});
        break;
    }
}
if(contains == false){
    var rnd = window.btoa("rnd" + (Math.random()));
    var newVar = new TempVar(fromUid, rnd);
    testList.add(newVar);
    router.push("ViewProfile", {id: fromUid, random: rnd});
}
}

This is our code and we still have av problem with loading new profiles and I am sorry, but we are pretty new to fuse and do not understand the documentation for every thing. The problem is that the same profile is loaded even if we puch each person with an new instance.

5

That snippet alone won’t be enough to suggest a fix. If you’re new to Fuse, have you taken a thorough look at this section of Tutorial? It covers passing [and receiving] params between pages quite well.

6

Alright, thank you.

7

50kent, please post a minimal, complete reproduction (singe-UX-file, copy-paste-and-run) in a new forum thread and we’ll take it from there.