2

WinJS FlipView コントロールと WinJS PageControls を使用して「ウィザード」を作成しようとしています。各ページ コントロールは、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;
    });
};

そしてそれはうまくいきました-初めてフリップビューコントロールページに入りました。ページ間を行ったり来たりすることができ、簡単な更新が実行されます。

その後、アプリの別のページに移動してからフリップビュー ページに戻ると、次のエラーが発生します。

0x800a138f - JavaScript ランタイム エラー: 未定義または null 参照のプロパティ '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;
        })
    };
}

準備完了イベントでコードを削除すると、2 回目でもページが機能します。ただし、作成中のウィザードでは、準備完了イベントで実行するコードが必要になるため、削除することはできません。

ページがどこかに/どういうわけかキャッシュされているようで、フリップビューは実際の html を再レンダリングできますが、ページ オブジェクトを再作成することはできません。

したがって、私は完全に明らかな何かを見逃しているか、フリップビュー コントロール ページから移動するときにページ コントロールをメモリから完全に削除する方法を見つける必要があるか、または私には思い浮かばなかった何かがあります。

プロジェクト全体はここの Git にあります: https://github.com/skimedic/FlipViewExample/

4

1 に答える 1

1

ドキュメント内の要素を見つけようとする代わりに:

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

ページのホスト要素で見つけてみてください。

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

elementreadyイベント ハンドラの最初のパラメータです。WinJS ページ コントロールは、ホスト要素が DOM にアタッチされる前に Ready イベントを発生させることが知られているため、document.getElementById()失敗します。

于 2013-10-11T10:25:00.177 に答える