0

JQM + Phonegap を使用してアプリを開発しています。

デバイスのスローダウンとアプリケーションのクラッシュを回避するために、自動 DOM サイズ管理が可能な JQM シングル ページ ナビゲーション モデルを使用しています。

ユーザーがナビゲートするときに、href="page.html" を使用して動的にページを DOM に挿入し、手動で changePage('page.html') を使用してユーザー インタラクションを処理しています。

したがって、私の知る限り、サーバーデータを使用するページでは次のことを行う必要があります。

  1. 新しいページを DOM にロード (挿入) して、ターゲットの div/コンテナーにアクセスします
  2. 新しいデータを動的に配置 (追加)

説明のために、次の例を見てください。

 function loadData (myJSONObject){

    // inject page
    $.mobile.changePage('page2.html');

    //load data
    for(var i=0; i<myJSONObject.data.length;i++){
    name = myJSONObject.data[i].name;
    link = myJSONObject.data[i].description;

    // #listData is the target container from page2.html                    
    $("<a />",{
        text: name,
        href: link
        }).appendTo(                                                
            $("<li />",{
            id: name,
            }).appendTo('#listData'));
    }

JavaScript の非同期動作により、JQM ページ インジェクション関数はデータのロードよりも時間がかかるため、このコードは空のリストになります。

**ご了承ください：

  • マルチページ モデルと changePage('#target') の使用
  • setTimeOut() でテストし、データ読み込みループを強制的に待機させることもできますが、それは最適ではなく、良い開発方法でもないと思います

質問: 新しいページが DOM に完全に挿入された場合にのみデータの読み込みを開始するコールバックまたは方法はありますか?

4

2 に答える 2

0

実際、私は Web サービスに接続された複雑なアプリを開発しています。これは、Web アプリのモバイル版です。

私は MVC モデルをエミュレートしているので、各ページには独自の controller.js、model.js、view.js、および html5 ページ (単一ページ ドキュメント) があります。そのため、changePage('page2.html') を使用してページを DOM に挿入し、JQM フレームワークに DOM、戻るボタンの機能、トランジションを処理させます...

ユーザーがページをナビゲートすると、新しいデータが必要かどうかに応じて、ページが表示されるか、非表示になるか、挿入されます-データ機能。

この例を見てください：

3 つのページで新しいレストランを発見するアプリを想像してみてください。ホーム (登録しているレストランの最新ニュースを表示)、レストラン (利用可能なすべてのレストランのリスト)、レストラン プロファイル (情報と登録/登録解除ボタン)。

したがって、ユーザーがリストからレストランをクリックすると、サーバーからデータを取得し、RestaurantProfile.html から別のターゲット ラッパーに配置する必要がありますが、ロードできないため、まずこのページを DOM に挿入する必要があります。データを分離ページに入れ、それを DOM に挿入します。それは可能ではありません。

そのページがすでに DOM に含まれているのか、それとも削除されたのかさえ気にしません。それは JQM フレームワーク次第です (changePage() は、必要に応じて前に loadPage() を実行します)。どのページが要求されているかを知り、対応するデータを渡すだけで済みます。それで全部です。

ここで、ユーザー、ユーザー プロファイル、ユーザー フィード、およびコメントを追加することで、この複雑さがさらに増します。簡単に 10 ページのアプリになる可能性があります。

そのため、今後新しい機能を簡単に追加できるように、「クリーンな」アプリ構造を維持するために、単一ページのドキュメントを用意することにしました。

pageinit イベント - 対応するページに配置する必要があり、常に関数をトリガーします。しかし、前に言ったように、単純なナビゲーション状況 (JQM navBar まで) の場合もあれば、嘆願書を管理する場合もあります。これは、データ フォーム サーバーを追加する必要がある場合です。

ハンディキャップ。私たちがどのような状況にあるかを知る方法は？

$.mobile.changePage('to', options) 関数 - この関数と pageload イベントの両方を使用して問題を解決できるかどうかを考えてみましょう (同じ options 引数を使用できるかどうかドキュメントで見つけることができませんでした) pageinit イベント)...

reloadPage > 新しいデータが必要な場合は true に設定できますが、JQM フレームワークが機能面で何を意味するのかさえわかりません...

data > これを json オブジェクトに設定できるようにする必要があります。しかし、私はまだこれを機能させていません...

私が取り組んでいる問題が今、はっきりしていることを願っています。

質問:

1) pageinit イベントは、pageload イベントと同じ「オプション」引数を処理しますか?

2) 'options > data' 引数を json オブジェクトに設定し、pageload イベントでそのコンテンツに正しくアクセスするにはどうすればよいですか?

3) reloadPage = true は正確には何を意味しますか?

于 2013-02-15T11:46:29.457 に答える
0

あるページから次のページに遷移するさまざまな段階で発生する pageLoad イベントがいくつかあります。ここではすべて非常によく文書化されています: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

あなたの場合、あなたが求めているイベントはイベントだと思いますpageinit。

于 2013-02-14T16:29:33.967 に答える