CODEWITHSUNDEEP
javascripthtmlwindows-runtimewindows-store-appswinjs
Skimedic
Skimedic

Reputation: 808

Showing PageControls in a FlipView with WinJS

I am trying to create a "wizard" using the WinJS FlipView control and WinJS PageControls. Each pagecontrol needs to do some processing in the ready handler.
I can make this work for the first time into the page that hosts the flipview (and the pages hosted get updated), but on subsequent entries, the ready event in the page controls hosted by the flipview can't find any of the elements on the page.

The flipview is simple:

<div id="flippenView" data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource: FlipViewDemo.datalist.dataSource}" > </div>

here is my data source:

`(function () {
    "use strict";
    var theData = [
        { page: "page1", pageuri: "/pages/home/pages/Page1.html" },
        { page: "page2", pageuri: "/pages/home/pages/Page2.html" },
        { page: "page3", pageuri: "/pages/home/pages/Page3.html" }];
    var theList = new WinJS.Binding.List(theData);
    WinJS.Namespace.define("FlipViewDemo", { 
        datalist: theList,
    }
    );
}());
`

For each of the pages I am running very simple JS to mess with the page:

(function () {
    "use strict";
     var contructor = WinJS.UI.Pages.define("/pages/home/pages/Page1.html", {
        ready: function (element, options) {
            WinJS.UI.processAll().then(function() {
                var el = document.getElementById('page1Test');
                el.innerHTML = "<b>page 1 updated</b>";
            });
        },
    });
    WinJS.Namespace.define("Page1", {
        Constructor:constructor
    })
})();

I can't bind the uri of an HTMLControl (it's only a ctor parameter and not a property), and using an iframe doesn't seem to work either (setting the source doesn't render a PageControl), so I am reduced to creating a custom renderer.

I started with a simple renderer:

function simpleRenderer(itemPromise) {
    return itemPromise.then(function (item) {
        var element = document.createElement("div");
        var ctl = new WinJS.UI.HtmlControl(element, { uri: item.data.pageuri});
        WinJS.UI.processAll();
        return element;
    });
};

and that worked - the first time into the flipview control page. I can bounce back and forth between pages and the simple update runs.

If I then navigate to another page in my app, and then navigate back to the flipview page, I get the following error:

0x800a138f - JavaScript runtime error: Unable to set property 'innerHTML' of undefined or null reference

This error comes up on this line in Page1:

el.innerHTML = "<b>page 1 updated</b>";

I tried a placeholder renderer as well:

function placeholderRenderer(itemPromise) {
    var element = document.createElement("div");
    element.style.height = "310px";
    element.style.width = "480px";
    element.innerHTML = "<div class='content'>Loading...</div>";
    return {
        element: element,
        renderComplete: itemPromise.then(function (item) {
            element.innerHTML = "";
            var ctl = new WinJS.UI.HtmlControl(element, { uri: item.data.pageuri });
            var foo = ctl;
        })
    };
}

If I remove the code in the ready event, the pages work, even the second time in. However, the wizard that I am creating will require some code to run in the ready event, so removing it isn't an option.

It appears that the pages are getting cached somewhere/somehow, and the flipview is able to re-render the actual html but not recreate the page object.

So, I am either missing something completely obvious, or I need to find a way to competely remove the pagecontrols from memory when navigating away from the flipview control page, or I something else that hasn't occurred to me.

The whole project is on Git here: https://github.com/skimedic/FlipViewExample/

Upvotes: 2

Views: 684

Answers (1)

bugventure
bugventure

Reputation: 498

Instead of trying to find the element in the document:

var el = document.getElementById('page1Test');

try finding it in the page host element:

var el = element.querySelector('#page1Test');

element is the first parameter of your ready event handler. WinJS page controls are known to fire the ready event before the host element is attached to the DOM, so document.getElementById() will fail.

Upvotes: 1

Related Questions