Question

我正在尝试使用WinJS FlipView控件和WinJS PageControls创建一个“向导”。每个页面控件都需要在就绪处理程序中进行一些处理我可以第一次将这个工作放到托管flipview的页面（并且托管的页面得到更新），但是在后续条目中，flipview托管的页面控件中的ready事件无法找到任何元素。页面。

翻转视图很简单：

<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'

此错误出现在Page1：

中的这一行

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/

Answer 1

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

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

尝试在页面主机元素中找到它：

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

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

使用WinJS在FlipView中显示PageControls

1 个答案: