javascript - 使用WinJS在FlipView中显示PageControls

我正在尝试使用WinJS FlipView控件和WinJS PageControls创建一个“向导”。每个pagecontrol都需要在ready处理程序中进行一些处理。
我可以让这项工作第一次进入承载flipview的页面（托管的页面也会更新），但在随后的条目中，flipview托管的页面控件中的ready事件找不到页面上的任何元素。
flipview很简单：
<div id="flippenView" data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource: FlipViewDemo.datalist.dataSource}" ></div>
这是我的数据源：

`(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,
    }
    );
}());
`

对于每个页面，我运行非常简单的JS来处理页面：

(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
    })
})();

我无法绑定HTMLControl的uri（它只是一个ctor参数，而不是属性），并且使用iframe似乎也不起作用（设置源代码不会呈现PageControl），因此我只能创建一个自定义呈现器。
我从一个简单的渲染器开始：

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;
    });
};

这是第一次进入flipview控件页。我可以在页面和简单的更新运行之间来回跳转。
如果我在应用程序中导航到另一个页面，然后再导航回flipview页面，则会出现以下错误：
0x800a138f-JavaScript运行时错误：无法设置未定义或空引用的属性“innerHTML”
此错误出现在第1页的这一行：

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

我还尝试了一个占位符渲染器：

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;
        })
    };
}

如果我在ready事件中删除了代码，页面就会工作，即使是第二次。但是，我正在创建的向导需要一些代码才能在ready事件中运行，因此删除它不是一个选项。
页面似乎被缓存在某处/以某种方式缓存，flipview能够重新呈现实际的html，但不能重新创建页面对象。
所以，我要么是遗漏了一些非常明显的东西，要么是在离开flipview控件页导航时，我需要找到一种完全从内存中删除页面控件的方法，要么是我没有想到的其他事情。
整个项目都在Git上：https://github.com/skimedic/FlipViewExample/

最佳答案

而不是试图在文档中找到元素：

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

尝试在页面宿主元素中查找它：

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

element是ready事件处理程序的第一个参数。已知WinJS页面控件会在主机元素附加到DOM之前触发ready事件，因此document.getElementById()将失败。