Grid App Back Button issue

Question

So I started with the Grid App template. I've created a few other page controls in my pages folder. I've also customized the data in js/data.js. When the app starts it looks as it should. I choose one of the items on the grid and it goes to the page I directed it to, it also uses the new data2.js I have in that page controls folder for the new grid view. The problem is if I hit the back button it seems to go back to the previous .html page because the title changes back, however, the page is still using the data2.js to populate its grid.  I'm not sure whether I have to alter navigator.js or the .html or what to fix this.

Thanks!

Answer 1

Hi,

Please refer to the KB as follow:

#Quickstart: Using single-page navigation (Windows Store apps using JavaScript and HTML)

http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

I don't think that solves my issue.   So here's some code to show you:

This block of code is run when you click on one of the grid tiles.  

_itemInvoked: function (args) {
            if (args.detail.itemIndex == 0) {
                WinJS.Navigation.navigate("/pages/page2/page2.html");
            }
            else if (args.detail.itemIndex == 1) {
                WinJS.Navigation.navigate("/pages/page3/page3.html");
            }

It's not a hyperlink from the HTML so I don't need to put in the eventInfo.preventDefault(); And I am using the WinJS.Navigation.navigate so it's already using the idea of page control.  The back button seems to work as far as changing the title that is in my HTML, so it must be getting pointed back to the correct place.  My confusion, is that at the top of the HTML file I have it referencing a specific data.js, although it populates the grid correctly from this data.js the first time, when I go back, the data.js file is the same one from where I clicked back, even though the title is correctly changing back to where I previously was. 

Answer 3

Answer from Joel Kucera: (http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f612f2ad-fca4-44b1-a6ae-ea12ad7ddc52)

Looking at your steps above, I think what's happening is that the copy of data.js that you put into /pages/test/ is redefining members in the "Data" namespace. So when you navigate to the Test page, it's executing /pages/test/data.js and replacing the items that the listview in groupedItems.html is using.

In your example, both /js/data.js and /pages/test/data.js contain the following code,

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemReference: getItemReference,
        getItemsFromGroup: getItemsFromGroup,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

In the file /pages/test/data.js, try changing "Data" to "TestData". If you have anything in the Test page that is accessing data from /pages/test/data.js, it will need to be updated to access it via the TestData namespace.

I hope that helps,

Joel