7

私はWindows8Metroアプリに取り組んでおり、ページ間を移動すると、トップレベルの「default.html」がすべてのjsを取得し、アプリケーションの実行中にロードされたcssファイル。

私のcssが異なるページ間で衝突しているので、これは私に多くの頭痛の種を引き起こしています。私は何かが足りないのですか、それともこれは深刻なバグですか？

4

4 に答える 4

13

JavaScriptとCSSをアンロードしないことは、事故や見落としではなく、意図的な選択でした。

まず、ページコントロールは純粋にJavaScriptの構造であることを理解してください。ブラウザエンジンはそれらをまったく認識していません。ブラウザには、スクリプトによって動的に生成されたDOMのチャンクが表示されます。

Webプラットフォームでは、スクリプトファイルをアンロードできません。コンテキストにロードされると、スクリプトファイルは永久に存在します。

CSSを使用すれば、タグを削除しようとすることもできますが、ワームの可能性が広がります。ナビゲートする注文ページによっては、同じアプリに異なるスタイルが適用される可能性があります。2つのページが同じスタイルシートを参照している場合はどうなりますか？同じリンクタグを2回追加しますか？そして、どれを削除しますか？

それは混乱です。代わりに、WinJSは、スクリプトとスタイルシートが最初に参照されるときに1回だけロードされることを保証します。したがって、アプリ参照「myStyles.css」のすべてのページを含めることができ、ロードされるのは1回だけです（スタイルタグは1つだけです）。

では、発生している問題を防ぐために何をしますか？まず、新しいコンテンツを任意に成長させるWebサイトではなく、アプリを構築していることを忘れないでください。一般的なスタイルとクラスを決定します。共有スタイルをdefault.cssに入れ、default.htmlファイルから参照します。

個々のページの場合、最も簡単な方法は、スタイルの前にページ名を付けることです。それ以外の：

<div class='intro'></div>

行う

<div class='page1-intro'></div>

そうすれば、衝突を回避することが保証されます。

IDでページ要素を参照している場合は、そうしないでください。ページでIDを使用すると、あらゆる種類の潜在的な奇妙さが発生します（同じページコントロールを同時に2回レンダリングするとどうなりますか？また、ページがDOMに読み込まれるまでIDは存在しません。つまり、data-win- IDによるオプション参照は機能しません）。ただし、繰り返しになりますが、IDの前にページを付けることを検討してください。

基本的に、衝突を防ぐためにアドホック名前空間を設定します。リンクタグを手動でリッピングするよりもはるかに簡単で、完全なナビゲーションを行うよりもはるかに優れたアプリエクスペリエンスが得られます。

于 2012-08-17T21:00:14.297 に答える
3

これはバグではなく、WinJStempaltesで使用されるデフォルトのアプリパターンの一部です。デフォルトのWinJSテンプレートは単一ページモデルを使用します。つまり、すべてのコンテンツはPageNavigatorControlを使用してdefault.htmlにロードされます。その結果、メモリには常に単一のDOMがあります。通常のブラウザで同様のパターンに従った場合、同じ動作が見られます。

必要に応じて、複数のページと従来のhrefリンクを使用した従来のナビゲーションを使用できます。これは推奨されるアプローチではありませんが、そのモデルを使用して構築された既存のWebアセットを持ち込もうとしている場合は、作業が簡単になります。

于 2012-08-17T02:40:46.820 に答える
0

この問題はlink、スタイルをインポートする要素をドキュメントに照会し、不要な要素を無効にすることで解決できます。アプリの一般的なスタイルを定義するために使用する場合は、プロジェクトでMSCSSファイルとdefault.cssファイルを無効にしないようにする必要があります。

これは、その方法を示すサンプルです。これはpage2.htmlというファイルで、WinJS.Pages.UI.renderメソッドによってロードされると、不要な要素を見つけて無効にしますlink。page2.cssファイルが有効になっていることを確認し、単に無視するファイルのリストを保持します。

（これをreadyハンドラー関数に入れますが、WinJS.Navigationイベントのハンドラーでこの手法を使用する傾向があり、一貫したファイル命名に依存して目的の結果を取得します）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>UnloadCSS</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- UnloadCSS references -->
    <link href="/css/page2.css" rel="stylesheet" />

<script>
    WinJS.UI.Pages.define("/page2.html", {
        ready: function () {

            var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"];
            var myCSS = "/css/page2.css";

            WinJS.Utilities.query("link").forEach(function (linkElem) {
                if (linkElem.href.indexOf(myCSS) > -1) {
                    linkElem.disabled = false;
                } else {
                    var ignore = false;
                    ignoreList.forEach(function (ignoreItem) {
                        if (linkElem.href.indexOf(ignoreItem) > -1) {
                            ignore = true;
                        }
                    });
                    if (!ignore) {
                        linkElem.disabled = true;
                    }
                }
            });
        }
    });
</script>
</head>
<body>
    <button>Change </button>
</body>
</html>
于 2012-08-17T08:01:38.437 に答える
0

これは、慣例名がアプローチする場合の良い解決策になる可能性があります。

var currentPage = Application.navigator.pageControl.uri.replace("ms-appx://" + Windows.ApplicationModel.Package.current.id.name.toLowerCase(), "");
var currentCss = currentPage.replace(".html", ".css");

var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"];

WinJS.Utilities.query("link").forEach(function (linkElem) {
    if (linkElem.href.toLowerCase().indexOf(currentCss) > -1) {
        linkElem.disabled = false;
    } else {
        var ignore = false;
        ignoreList.forEach(function (ignoreItem) {
        if (linkElem.href.toLowerCase().indexOf(ignoreItem.toLowerCase()) > -1) {
            ignore = true;
        }});
        if (!ignore) {
            linkElem.disabled = true;
        }
        }
});
于 2013-08-14T19:09:54.810 に答える