1

フッターには、ホーム、プロモーション、イベントの 3 つのタブがあります。新しいプロモーションがデータベースに読み込まれると、モバイル ページのフッターに 1 が表示され、それ以上挿入されると数字がリアルタイムで増加するように、通知バッジが実装されています。たとえば、ホームページから始めて、プロモーションとイベントのタブにリアルタイムの通知が表示されたとします。しかし、イベント タブに移動すると通知は消えますが、クリックしてホーム タブに戻ると通知が表示されます。「pageinit」と「pageshow」を別々に試しましたが、他のスタックオーバーフローの質問で提案されているように、テストの警告メッセージが表示されます。タブをクリックするたびに警告メッセージが表示されます。しかし、append や html で変更しようとすると、通知バッジが出力されません。ホーム用の data-role=page に id を追加してみましたが、プロモーションやイベント、アラートは表示されますが、append または html 機能で期待どおりの結果が得られません。ここで何が欠けていますか？

    <div data-role="page">

         <div data-role="header">
            ........
         </div>


         <div data-role="content">
                 .......
         </div>

        <div data-role="footer" data-position="fixed" >
             <div data-role="navbar" >
                 <ul>
                                   <!---- The notification badge from jquery script get appended in these IDs----->
                                 **<li><div id="home"></div>...........</li>**
                                 **<li><div id="promotion"></div>......</li>**
                                 **<li><div id="event"></div>..........</li>**
             </div>
        </div>
    </div>
4

1 に答える 1

0

私の最初のページがホームページである場合、JQuery Mobile はそれを履歴に保存し、アクセスした他のページは ajax 呼び出しになると考えました。そして、私は通知バッジをそれらが属するページに保存しています。たとえば。新しいプロモーションが追加されている場合は、promotion.mobile.erb に追加されています。新しいイベントが追加されている場合は、event.mobile.erb の div 要素に追加されています。現在のページがホームページである場合にのみ、それを見ることができます。これは以前の問題でした。

どのように解決しましたか？フッターとページ要素を application.mobile.erb から unDRY し、ページ ID を home 、プロモーション、およびイベント ページに追加しました。次に、通知バッジが移動する div 要素に異なる ID を追加しました。

  • home_page の div 要素に 0 を追加しました (独自のものを選択できます)
  • Promotion_page の div 要素に 1 を追加し、

  • event_page の div 要素については、以下のコードのように 2 を追加しました...

    <div data-role="footer" data-position="fixed" >
     <div data-role="navbar" >
         <ul>
                           <!---- The notification badge from jquery script get appended in these IDs----->
                         **<li><div id="home0"></div>...........</li>**
                         **<li><div id="promotion0"></div>......</li>**
                         **<li><div id="event0"></div>..........</li>**
     </div>
</div>

ここで、リアルタイム通知が発生したら、promotion0 または event0 div のいずれかに追加して、ナビゲートするたびにその div から古いバッジを取得し、pageinit を使用してナビゲートされたページ div 要素に再投稿できるようにします以下の例...

   $('#promo_page').live('pageinit',function(event){
        $('#promotion2').badger(oldBadge0);
        $('#event2').badger(oldBadge_e0);
    });
于 2012-06-08T20:56:03.057 に答える