7

jQuery Mobile v1.4、2014 年 2 月です。

そのため、ここ (gihub)で、読み込まれたページが意図したものであるかどうかを判断するためifに、キャッチされたイベントに関するステートメントを作成することになっていることを読みました。pagecontainer

これは、新しい pageContainer ウィジェットの意図された動作とその用途を理解するための小さなシナリオです。

そのように単純なログインページで、ウェルカムページをプログラムでプリフェッチし、ログインに成功するとウェルカムページに切り替えます。ウェルカム ページには、ページをアニメーション化するためのJS スクリプトが含まれており、ページが表示されている場合にのみ起動する必要があります。どうやってそれを行うのですか？

コンソールからpagecontainer イベントを調査しているときに得た結果を次に示します。ここでの私の目標は、ようこそ (実際には任意のページ) ページがアクティブ/表示されていることを検出する方法を見つけることです。

理解のために、この形式をクエリとして使用しました。

$( 'body' ).on( 'pagecontainerbeforeload', function( event, ui ) {
    console.log("beforeload");
    console.log(event);
    console.log(ui);
});

初めてページとJQMをロードしたとき（つまり、新たなスタート/Users/login）

使用可能なイベント:

  • pagecontainercreate => 空の UI
  • PCbeforetransition => ui.toPage使用可能
  • PCshow => ui.prevPage のみを取得します (その場合は空です)
  • PCtransition => ui.toPage使用可能

現在、トランジション効果を無効にしても、これらは常に起動されます ( api を参照) 。

わかりました、それから私はプログラムでページをロードしたいです（プリフェッチします）、私はそうします：（欲しい/Users/welcome）

$("body").pagecontainer("load", "/Users/welcome");

これらのイベントが開始されます (ページはまだ表示されていません):

  • PCbeforeload => ページを識別するために使用できる URL を取得します。
  • PCload => PCbeforeload とほぼ同じデータ

よし、ではページを変更します : (to /Users/welcome)

$("body").pagecontainer("change", "/Users/welcome");

これらのイベントがトリガーされます。

  • PChide => ui.nextPageは ui.toPage と同じです...
  • PCbeforetransition => ui.toPage使用可能
  • PCshow => ui.prevPage のみを提供します
  • PCtransition => ui.toPageが期待どおりに存在する

これで、このページがロードされていることを確認するために使用したい唯一の pagecontainer イベントはpagecontainertransition. JS を起動する必要があるすべてのページに実装したものは次のとおりです。

ページコンテナの ID を設定する(PHP)

<div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>">

...ページの最後（JS）

$( 'body' ).on( 'pagecontainertransition', function( event, ui ) {
    if(ui.toPage[0] == $('#'+id_url )[0] ) {
        functionToLaunchWhenPageShowUp();
    }
} );

ui.toPageさて、ご覧のとおり、 1st child[0]と比較するために$('.selector')1st child を参照してい[0]ます。それは正しい方法ですか？つまり、新しい API によって意図された方法です。知識を共有していただきありがとうございます;）

4

1 に答える 1

6

私はうまく機能し、比較的単純で、可能な限り DRY の原則に近づけることができました (同じことを繰り返さないでください)。

それらが「ロード」される順序で：

ドキュメントの < head > 内の JS スクリプト 

<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
  (function(){
  //Global settings for JQM 1.4.0
  $( document ).on( "mobileinit", function() {
        //apply overrides here
         $.mobile.defaultPageTransition = 'flip'; 
  });
  // The event listener in question !
  $( document ).ready(function () { //..only launched once the body exist
    // The event listener in question :
    $( 'body' ).on( 'pagecontainertransition', function( event, ui ) {
        //gets the id you programatically give to your page
        id_url = $( "body" ).pagecontainer( "getActivePage" )[0].id;
        //compare the actual event data (ui.toPage) 
        if( ui.toPage[0] == $('#'+id_url )[0] ) {
            // failsafe
            if ( typeof( window[ id_url ].initPage ) === "function" ) {   
                // call the dynamically created init function
                window[ id_url ].initPage();
            }
        }
    } );
  });

  document.loadPage = function( url ){
    $( "body" ).pagecontainer( "load", url  , options);
  };
  document.changePage = function( url ){
    $( "body" ).pagecontainer( "change", url  , options);
  };
 })();    
</script>
<script type="text/javascript" src="/js/jquery.mobile-1.4.0.min.js"></script>

返されたすべてのページの開始 

<div data-role="page" data-theme='a' id="<?php echo $this->id_url()?>">
<div data-role="content">
<script type="text/javascript">

// we create dynamically a function named after the id you gave to that page
// this will bind it to window
this[ '<?php echo $this->id_url() ?>' ].initPage = function(){
    // put anything you want here, I prefer to use a call 
    // to another JS function elsewhere in the code. This way I don't touch the 
    // settings anymore
    NameOfThisPage.launchEverythingThatNeedsTo();
};
</script>
...

このコードの説明は次のとおりです。まず、すべてのグローバル クエリに対して1 つの場所を取得します。JQM では、すでに jquery.js と jquery.mobile.js の間に何かを配置するように強制されているので、それを使用しましょう。

グローバルな JQM 設定に加えて、body/document/ にバインドするイベント リスナーを1 つだけ使用します (それが将来的にどうなるかは関係ありません)。body が存在する場合にのみ起動されます。

さあ、ここからが楽しみの始まりです。サーバーが返すすべてのページ (つまり、/の代わりに_を使用したスクリプト ルート) にプログラムで id を与えます。次に、その ID にちなんで名付けられた関数を作成し、ウィンドウにアタッチします (他の場所に配置できると思います..)。

次に、イベント リスナーに戻ります。移行時に、pagecontainer( "getActivePage" )メソッドを介して設定した ID を取得し、その ID を使用してページの jQuery スタイルを取得し、それをイベント リスナーによって返されたデータと比較します。

成功した場合は、その ID を使用して、ページに配置した init 関数を起動します。ページに init スクリプトを配置しない場合のフェイルセーフがあります。

ここでのボーナスは、それらの document.loadPage / changePage です。ページを変更する方法が変更された場合に備えて、それらをそこに置きました。1 か所を変更すると、アプリ全体に適用されます。ドライです＾＾

全体として、この方法を改善する方法についてコメントがある場合は、共有してください。v1.4 メソッドの例が大幅​​に不足しています (v1.3 の例との混乱に加えて)。私は自分の発見をできる限り共有しようとしました（ps。それらの担当者ポイントが必要です:P ）

于 2014-02-04T13:28:01.160 に答える