2

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

翻转视图很简单：

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

这奏效了——第一次进入翻转视图控制页面。我可以在页面之间来回切换，然后运行简单的更新。

如果我然后导航到我的应用程序中的另一个页面，然后导航回翻转视图页面，我会收到以下错误：

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 事件中运行，因此删除它不是一个选项。

页面似乎在某处/不知何故被缓存，并且翻转视图能够重新呈现实际的 html 但不能重新创建页面对象。

所以，我要么遗漏了一些完全明显的东西，要么我需要找到一种方法来在离开翻转视图控件页面时从内存中完全删除页面控件，或者我没有想到其他的东西。

整个项目在 Git 上：https ://github.com/skimedic/FlipViewExample/

4

1 回答 1

1

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

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

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

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

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

于 2013-10-11T10:25:00.177 回答