1

単一のHTMLページ（Mobile.html）で構成されるモバイルサイトがあります。コンテンツは、のJQM形式のdivに動的にロードされますdata-role="page"。ページ上の唯一の静的コンテンツはbodyタグです。他のすべては、ユーザーがWebサービス呼び出しからDOMを構築しているページを操作するときに構築され、破棄されます。

これはすべて非常にうまく機能しますが、1つの大きな例外があります。リンク処理が壊れています。JQMがURLハッシュに追加されると、更新とナビゲーションが中断されます。私はこの問題のさまざまな解決策をテストしてきましたが、これまでのところ実際に機能するものはありません。

JQMナイトリービルドと1.0A4.1の両方を使用して、問題を次のテストコードに簡略化しました。

<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
    <div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
    <div id="StaticContent1" data-role="content">
        <ul data-role="listview" data-theme="b">
            <li><a href="#StaticPage1">Static Page 1</a></li>
            <li><a href="#StaticPage2">Static Page 2</a></li>
            <li><a href="#DynamicPageA">Dynamic Page A</a></li>
            <li><a href="#DynamicPageB">Dynamic Page B</a></li>
        </ul>
    </div>
</div>
<div id="StaticPage2" data-role="page">
    <div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
    <div id="StaticContent2" data-role="content">
        <ul data-role="listview" data-theme="b">
            <li><a href="#StaticPage1">Static Page 1</a></li>
            <li><a href="#StaticPage2">Static Page 2</a></li>
            <li><a href="#DynamicPageA">Dynamic Page A</a></li>
            <li><a href="#DynamicPageB">Dynamic Page B</a></li>
        </ul>
    </div>
</div>

<script type="text/javascript">

    $('#StaticPage1').live('tap', function (event) { return onClick(event); });

    function onClick(event)
    {
        var id = $(event.target.outerHTML).attr('href');
        var $page = $(id);
        if ($page.length === 0) $page = makePage(id);
        $page.live('tap', function (event) { return onClick(event); });
        $.mobile.changePage($page, 'slide');
        return false;
    }

    function makePage(id)
    {
        id = id.replace('#', '');
        $('body').append('<div id="' + id + '" ' + 'data-role="page">')
        var $page = $('#' + id);
        $page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
        var $header = $('#Header_' + id);
        $page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
        var $content = $('#Content_' + id);
        $page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');

        var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
        var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
        var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
        var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
        var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
        $content.append($ul);
        return $page;
    }
</script>

静的コンテンツは期待どおりに機能しますが、動的コンテンツは予期しない動作を引き起こします。通常、404エラー（GET http：// localhost / DynamicPageA 404（見つかりません））またはJQMの「読み込み中...」アニメーションのいずれかです。ブラウザのアドレスバー（http：// localhostDynamicPageA）に無効なURLがあります。

まず、を呼び出さないと、リンク処理をまったく機能させることができません$.mobile.changePage();。この時点で、新しいコンテンツはすでにDOMに含まれています。それでは、なぜJQMがリンクを処理できないのでしょうか。

第二に、changePage（）はそれ自身の癖を注入しているようです。同じ動的リストアイテムを2回クリックすると、404エラーが返されます。動的リンクでブラウザを更新すると、404が返されます。

JQMのインフラストラクチャを使用してこの問題を解決する最も簡単な方法は何ですか？

編集：

「ページ」divにdata-url属性を追加すると、問題の一部が解決されます。動的コンテンツのクリックでリンク処理が機能するようになりました。ただし、戻る（JQMの自動生成された「戻る」ボタンを使用）および更新はまだ壊れています。

  1. [戻る]ボタンは次のURLを生成します：http：// localhostdynamicpagea /＃このエラー：「フィドラー：localhostdynamicpageaのDNSルックアップに失敗しました。そのようなホストは不明です」。ブラウザの戻るは問題なく機能します。そのため、これを解決するために自分の「戻る」ボタンを押すだけでかまいません。
  2. 動的ページでのブラウザの更新でも、このコンソールログエラー「GEThttp：// localhost / DynamicPageB 0（）」で空の画面が生成されます。このURLでページが更新されることを期待します：http：//localhost/Mobile.html#DynamicPageBは、動的ハッシュを除いてMobile.htmlを更新します。
4

1 に答える 1

0

最終的にサンプルコードを期待どおりに機能させることができましたが、モバイルアプリに実装しようとすると、AJAX呼び出しの結果に基づいてすべてのコンテンツを生成しているため、再び問題が発生しました。これは、DOMを非同期的に解析しているJQMとの競合状態を示しています。ほとんどの場合、.page（）が呼び出される前に、新しい「ページ」にリダイレクトします。

幸いなことに、私はこれを見つけました：http ://www.a2zdotnet.com/m/#view.htm?id=196

サイトごとの提案を今すぐ実装します。

于 2011-05-20T02:04:27.097 に答える