2

2 つのビュー (基本的に、アイテムのリストと選択したアイテムの詳細ページ) を持つ単一ページのアプリケーションがあります。両方のビューは別々の html ファイルにあり、sammy.js を使用してページ間の遷移/移動を行っています。jQuery Mobile をミックスに追加しようとするまでは、すべてうまく機能していました。ここで、2 番目のページ (詳細ページ) に移動すると、jQuery Mobile はページのスタイルを設定していません。

私たちの作業中のアプリは、jQuery Mobile のマルチページ テンプレートで説明されているように設定されていません (つまり、すべてのページ div を同じ html ファイルに配置し、ナビゲーション システムを使用して、リンクされたページを AJAX 経由で DOM にロードします)。しかし、別のページを作成し、jQuery Mobile のナビゲーション以外のものを使用して、2 ページ目を jQuery Mobile スタイルにすることは可能でしょうか? または、jQuery Mobile に 2 番目のページのスタイルを強制する方法はありますか?

ここに、私たちが何をしているかを示すのに役立つと思われるいくつかのコード スニペットを示します。(注: ASP.NET Razor ビューも使用しています。)

index.cshtml

<body>
    @RenderPage("Views/items.cshtml")
    @RenderPage("Views/item.cshtml")

    @Scripts.Render("~/bundles/jquery")
    <script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
            $.mobile.loader.prototype.options.text = "loading.  please wait...";
            $.mobile.loader.prototype.options.textVisible = true;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile", ...)
</body>

items.cshtml (このページは正しく読み込まれ、レンダリングされます)

<section id="items-view" class="view" data-role="page">
    <section data-role="header">
        ....
    </section>

    <section data-role="content">
        (navbars, ULs, LIs, etc. are here, with each LI a link to go to the details page)
    </section>

    <section data-role="footer">
        ....
    </section>
</section>

item.cshtml (このページは読み込まれますが、正しくレンダリングされません。jQuery Mobile スタイルはありません)

<section id="item-view" class="view" data-role="page">
    <section data-role="header">
        ....
    </section>

    <section data-role="content">
        (ULs, LIs, listboxes, textboxes, etc. are here)
    </section>

    <section data-role="footer">
        ....
    </section>
</section>

router.js (ページ間のルーティングに使用)

....
            navigateTo = function (url) {
                sammy.setLocation(url);  // url = #/items or #/item/1234
            },
....

アイテム ページの js ファイルでは、次のことを試しました。

        var $page = $("#item-view");
        //$page.trigger("create");
        //$page.listview("refresh");
        //$page.page();  (this one kind of work but doesn’t style every object)
        //$page.page("refresh", true);

しかし、正しく完全に機能するものは何もありません。

繰り返しますが、私たちの状況を考えると、jQuery Mobile マルチページ アプリに実際の個別の物理ファイルを持たせ、すべてのページのスタイルを正しく設定する方法はありますか? または、jQuery Mobile にすべてのページのスタイルを正しく設定させるプログラム的な方法はありますか?

ありがとう。

4

1 に答える 1

0

jquery mobile は、2 番目のページからすべてをロードするわけではありません。JQM (または ajax メソッド) を使用して新しいページが必要な場合、ページの DOM の一部をロードし、その下にあるすべてのものを取得します。

<div data-role="page" id="yourPageID"></div>

したがって、次のように、スタイルシートを「data-role」の下に置くだけです。

<div data-role="page" id="yourPageID">
    <link rel="stylesheet" href="yourStyleSheetLink.css" />
</div>

その後、JQM が新しいページを要求すると、スタイルシートが読み込まれます。

非英語話者として、あなたが私の言葉を理解してくれることを願っています:)

于 2013-01-22T10:28:53.790 に答える