locked
WinJS Page updateLayout and unload Not Firing

    Question

  • When I create a new PageControl in a WinJS application, the ready function fires when the page is navigated to, but I can't seem to get the updateLayout or unload event handlers to run. As recommended in Unload event not getting triggered in metro style apps, I am using the navigation framework to switch between views.

    In an attempt to fire updateLayout I am snapping and filling the application, but the event handler is never run. When I navigate away from the page, the unload event handler is never run. I understand that I can handle the beforenavigate event in the Navigation framework to fill in for unload, but I'd like to see if I can get the page to work as the code templates are designed. Here's the code:

    WinJS.UI.Pages.define("/views/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { // TODO: Initialize the page here. }, updateLayout: function (element, viewState, lastViewState) { /// <param name="element" domElement="true" /> /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" /> /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" /> // TODO: Respond to changes in viewState.
            // NOTE: This event handler is never called.
    }, unload: function () {         // TODO: Respond to navigations away from this page.

    // NOTE: This event handler is never called.

    } });


    Is this an issue in the WinJS framework, or am I doing something wrong?
    Sunday, July 29, 2012 2:38 PM

Answers

  • Hi,

    It seems the issue cannot be reproduced on my side, I created a new project using the Navigation App template and created a new page. Added your code to home.js, then added break point to updateLayout. Then, whenever I snap/unsnap the app, updateLayout is fired.
     
    I added the following code to ready:
     
    WinJS.Navigation.navigate("/pages/home/pagecontrol.html");
     
    Now, unload is fired as soon as the app starts as I'm trying to navigate to another page.
     
    If it doesn't work for you, please check your code to see if there're something breaking.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Monday, July 30, 2012 3:32 PM
    Moderator

All replies

  • Hi,

    It seems the issue cannot be reproduced on my side, I created a new project using the Navigation App template and created a new page. Added your code to home.js, then added break point to updateLayout. Then, whenever I snap/unsnap the app, updateLayout is fired.
     
    I added the following code to ready:
     
    WinJS.Navigation.navigate("/pages/home/pagecontrol.html");
     
    Now, unload is fired as soon as the app starts as I'm trying to navigate to another page.
     
    If it doesn't work for you, please check your code to see if there're something breaking.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Monday, July 30, 2012 3:32 PM
    Moderator
  • This is how I'm handling navigation:

        WinJS.Navigation.addEventListener("navigated", function (e) {
            if (e.detail.location) {
                var
                    url = "/views/" + e.detail.location + ".html",
                    host = document.querySelector("article");
    
                WinJS.Utilities.empty(host);
    
                e.detail.setPromise(WinJS.UI.Pages.render(url, host, e.detail.state));
            }
        });
    Do you see anything wrong with my approach?
    Wednesday, August 1, 2012 4:56 AM
  • Okay, Ming was exactly right :)

    I was trying to use some of my own code instead of the navigator.js script that comes with the Navigation Application template in Visual Studio (silly - I know). Once I started using that script (as it calls updateLayout and unload explicitly) then everything was working as expected.

    Monday, August 6, 2012 2:24 PM