WinJS Retaining Element IDs When Navigating

Question

I am working on a WinJS application using the Navigator template and am experiencing a weird issue.

In the application there is a search page with some filters, when clicking on a search result the application navigates to another page to edit the item.

The problem is that both pages have a tag with the same id and when accessing the element via JavaScript in the second page, it is returning the element from the search page.

I can see that this might be the expected behaviour due to how JS/CSS is loaded in single page application, but should I be doing something to unload the elements / JS?

I appreciate that I could uniquely name elements for each page, but I can see our team running into this problem time and time again as more people work on the application and the functionality grows.

Answer 1

You're using the Navigation template, you say? If so, I assume that you haven't made any changes to navigator.js. And by 'search page', is this a separate PageControl or a Search contract?

The PageControlNavigator._navigating method in navigator.js contains a couple of important calls that gets rid of the old PageControl:

• oldElement.winControl.unload
• oldElement.winControl.dispose (Windows 8.1 / WinJS 2.0)
• oldElement.parentNode.removeChild(oldElement)
• oldElement.innerText = ""

- Of course, the PageControlNavigator is only called if you're using WinJS.Navigator.navigate to load new pages.

The best way to diagnose this issue is by switching to the desktop while you're debugging the app and looking at the DOM explorer.

One work around might be to add some code to the PageControl.unload member of the search page that removes all of the elements from the DOM. You can use WinJS.Utilities.empty on the host element to remove them all. When the user navigates back to the Search page, the HTML stored in the app will be loaded back into the PageControl host.