0

PhoneGapとjQueryMobileで構築しているモバイルアプリがあります。ユーザーがリンクをクリックすると、アプリはSQLiteデータベースから動的コンテンツをフェッチします。データは、jQMの折りたたみ可能なセット（アコーディオン）でフォーマットされています。これがコードです。

ユーザーが適切なページに移動するためのメニュー：

<!-- data-role="page" id="mainmenu" -->
<ul data-role="listview" data-theme="c">
  <li><a id="news_link" href="#"> News</a></li>
  <li><a id="news_link" href="#"> Jokes</a></li>
  <li><a id="news_link" href="#"> Rumours</a></li>
</ul>

<!-- data-role="page" id="mainmenu" -->
<div data-role="page" id="news" data-title="AreApp News" data-theme="c">
    <div data-role="header" data-theme="c"></div><!-- /header -->
    <div id="newscontent" data-role="content" data-content-theme="c"></div>
    <div data-role="footer"></div>
</div>

以下では、クリックされた要素のIDによるクリックイベント検出を使用し、コンテンツをフェッチして正しいdivに配置するデータベース読み込み関数を呼び出します。

$(function() {
    $('#news_link').click(function(){ // event handler of newslink
        loadNewsFromDB(function(){
            $.mobile.changePage( $("#news"), { transition: "slideup"} 
         );
    });
});

function loadNewsFromDB(callback){
    //DB-logic and html code generation here....
    $(htmlStr).appendTo( "#newscontent" ).trigger( "create" );
    $("#newscontent").html(htmlStr);
}

初めてリンクをクリックしたとき、ロジックは非常にうまく機能します。しかし、携帯電話の「戻る」ボタンを押してメインメニューに戻り、リンクをもう一度クリックすると、コンテンツが正しくフォーマットされません。ニュースが表示されているということですが、折りたたみ可能なセットを使用する必要があるため、フォーマットは適切ではありませんが、そうではありません。

関数の使用をにバインドすることにより、jQueryのremove（）関数とempty（）関数を使用してコンテンツをクリアしようとしました 

$(document).bind( "pagebeforechange", function( e, data ) {
    var obj = $.mobile.path.parseUrl( data.toPage );
    if(obj.hash=="#mainmenu"){
        $('#news-collapsible').empty().remove();
    }
});

しかし、結果はありません。私はこの挑戦にかなりこだわっています。誰かがこれでどこに行くべきか教えてくれたら、私は深く感謝します。

4

1 に答える 1

0

この折りたたみ可能なセットを更新する必要があります。

$('#newscontent').collapsibleset('refresh');
于 2012-09-09T16:41:10.363 に答える