2

jQuery Mobile リストビューが更新されないという問題がありますが、非常に特定の 1 つのインスタンスでのみ発生します。この問題は、Android フォン (具体的には Google Nexus) でアプリをテストしているときに発生します。この問題は、リストビューがビュー 1 からビュー 2 に正しくロードされた後に発生します。その後、ビュー 3 に移動します。ビュー 3 からビュー 2 に移動すると、リストビューが完全にロードされません。これが意味することは、実際にはコードを適切にロードするということですが、行の 1 つを選択しようとするまで表示されません。行の 1 つを選択すると、すべてが突然表示されます。html に javascript を追加してリストビューを作成していdocument.ready()ます。これは現在悪い習慣であると言われていますが、jQueryの推奨される方法を使用するdocument.bind('pageinit')と、3から2まで機能しますが、ビュー2を離れるたびにdocument.bind('pageinit')再び解雇される。とにかくこのあたりはありますか？ありがとう！

4

1 に答える 1

0

jQuery Mobile を使用して開発する際に認識すべき最も重要なことの 1 つは、ページ間を移動するときに JavaScript がアンロードされないことです。これが実際に意味することは、.bind()（または.on()、推奨される方法である）を使用すると、ページを離れるときにバインドが解除されないということです。これは、これを自分で管理する必要があることを意味します。

苦労した後、次の解決策が私に最適であることがわかりました。にすべての JavaScript をロードし、<head>バインディングなどを処理する別の JavaScript ファイルを作成します。これらのファイルは、ページ ナビゲーションによってアンロードされません。このファイルの概要は次のとおりです。

$(document).on('pagebeforeshow', function(event){
    currentPageId = $(event.target).attr("id");
    //Give every <div data-role="page"> an id and switch on it.
    switch (currentPageId) {
        case "index":
            loadIndex();
            break;
        case "fooPage":
            loadFooPage();
            break;
        case "barPage":
            loadBarPage();
            break;
        default:
            break;
    }
});

各ページロードで、次の方法でそのページに必要な新しい関数をバインドします。

function loadIndex(){
    $(document).one("pageshow", function pageshow(event){
        console.log("Entered the index");
        $(window).on("scrollstart", someFunction);

        //Unbind everything when a new page is loaded.            
        $(document).one("pagebeforeshow", function pagebeforeshow(event){
            console.log("Exited the index")
            $(window).off("scrollstart", someFunction);
        });
    });
}

バインドしたいすべてのページに対してこれを行います。これが完了すると、各ページ ショーでロードおよびアンロードされるため、慣れ親しんだように JavaScript 関数を実行できます。

于 2012-09-28T14:37:44.180 に答える