WinJSContrib.Navigator (NuGet package)

To use this control, reference the javascript file in your default.html
<script src="/scripts/winjscontrib/mcnext.ui.navigator.js"></script>

Then replace the navigator control by this one (in default.html) :

<div id="contenthost" data-win-control="MCNEXT.UI.PageControlNavigator" data-win-options="{global:true, home: '/pages/home/home.html'}"></div>


This custom navigator add new feature on your pages, the most significant are :

eventTracker property

this help manage addEventListener's callback (and release them automatically). To use it, simply call :
var btn = document.getElementById('myButton');
myPage.eventTracker.addEvent(btn, 'click', function(){
    //do something
});

page actions

binding interactive elements to page function by adding data-page-action attributes
for example, if you have :
<div data-page-action="sayHello"></div>

clicking on the div will call the function "sayHello" on the page

promises cancelation

add your promises into the "promises" array property. They will be canceled when user leave the page

new events

Those events are called during the lifetime of your page. They can be propagated to custom controls.
prepareData
This is the very first event called on your page. It's even called before the previous page will be removed.
It's intended to start asynchronous data fetching.

This event can return a promise that will be awaited before processing the pipeline.
prepare
prepare is called while your page is off DOM and the previous page is showing it's exit animation.
This is the best step to add HTML and other DOM nodes
because you could be sure that it will not trigger costly engine steps like page layout or paint.

The page not beeing in DOM means that you have to scope selectors to the page root element.
It also means that layout properties on DOM nodes (like clientWidth) won't be filled.

This event can return a promise that will be awaited before processing the pipeline.
layoutPage
At this step the page was just added to the DOM.
This event is intended to receive code that could set or alter the layout of the elements.
ready
this is the standard page ready event.
contentReady
When you get notified for this events, your page is on screen and the entry animation has completed.
updateLayout
this is the same event as implemented in the default navigator control
exitPage
The user has chosen to move away from the page. This event is called before the page is removed from screen.
It's your opportunity to save state based on elements on your page (like scroll position)

At this step, you could also manage an exit animation and or return a promise to make the page navigator awaiting.
unload
Last step in the chain and last chance to do something on your page. It's the best place to release resources

Last edited Mar 17, 2014 at 5:48 PM by gleborgne, version 6