0

動的コンテンツを挿入するための以下に概説する手順が整然と正しいかどうか疑問に思います。このアプローチは、jQM のDynamic Page Generation doc で説明されているコードをわずかに変更した部分に基づいており、目立つステートメント ($.mobile.changePage) を削除しています。

ページが 2 つの仮想ページ ("pgActLst" と "pgActDet") で構成されているとします。仮想ページ「#pgActLst」には、PK を介して特定の範囲のさまざまなアクティビティを指すアンカーのコレクションが含まれています。「#pgActDet」は、選択した PK に関連付けられたアクティビティの詳細を示します。

私の質問は、$.mobile.changePage("#pgActDet") の使用法です。私の場合（アンカー）、このステートメントを含めると不要になるようです（実際には無限ループが発生します）。コードがコンテンツを正しく更新することに注意してください。以下に概説するアプローチは健全ですか、それとも長期的には私を苦しめる可能性がありますか? 私が見る限り、ステップ S1 は S2 の前に起動します。

// S1. Specify the firing event. 
   $("a", "#divActLst").live("click", function (e) {
      .. // Update local storage with selected ActID PK (The PK is retrieved in evt "pagebeforechange").
   })

// S2. If the target URL points to "pgActDet", retrieve activity details via a web service and 
//    dynamically fill up divActDet.    
   $(document).bind("pagebeforechange", function (e, data) {
      // Check if the target url matches "pgActDet"
      var url = $.mobile.path.parseUrl(data.toPage), reg = /^#pgActDet/;
      if (url.hash.search(reg) == 0) { 
         ..   // Pull PK actID and txt info from local storage.
         GetActDet(actID, txt); // Call up web service and refresh details content.
      };
    )}

 // S3. Inject html if web service qry GetActDet() is successful.
    function GetActDetOK() {
       .. // Fill up divActDet and bind events.
       //$.mobile.changePage("#pgActDet"); // Seems unecessary. (Is this ok?).   
    }
4

2 に答える 2

0

changePage ステートメントを廃止できる理由は、beforepagechange イベントでデフォルトの動作を妨げなかったからです。イベントが発生すると、JQM は命令を実行し、ページ変更という通常の動作を続行します。これは 2 つのことを意味します。いくつかの非同期アクションが発生している場合 (実際に実行している場合)、操作が完了するのを待っていない可能性があります。また、mobile.changePage を実行すると、無限ループに陥ります。これを処理する適切な方法はe.preventDefault();、GetActDet を呼び出す前に追加し、ページ コンテンツを取得/生成したら changePage を呼び出すことです。

于 2012-09-12T16:47:12.307 に答える
0

私は思う、私は問題を理解した。何らかの理由で、クリック イベントが 2 回発生しました。この煩わしさを解消するために、die() を介してハンドラーをリセットします。これはおそらく、 $.mobile.changePage("#pgActDet") が不要だった理由を説明しています。

コードを書き直す際に、「pagebeforeshow」イベントを使用して、詳細ページに動的コンテンツを挿入しました。イベント「pagebeforechange」は変更されません。コードは次の記事から改作されています: jQuery Mobile - Ajax - Dynamic content - Passing parameters、「pageshow」を「pagebeforeshow」に置き換えます。興味のある方のために、抜粋を以下に示します。

**Html**

<div id="divActLst" data_Items="0">
  ..
  <a href="javascript:void(0);" data_pgid="#pgActDet" data_actid="?actid=111" rel="external"  >
    <span>...</span>
  </a>
  ..                ..
</div>

**Code**

$("a", "#divActLst").die().live("click", function (e) { 
   // Pack relevant info from the clicked link (ie. pgID="#pgActDet", reqActID="?actid=111", actID=111, txt="2012-09-11 08:12...")
   var $this = $(this), o = {};
   o.reqActID = $this.attr("data_actid"); o.actID = o.reqActID.get("=", 1).toInt();
   o.pgID = $this.attr("data_pgid"); o.txt = $this.text().trim();

   $("#divActLst").data("act", o); // Save act info in local storage
   $.mobile.changePage("#pgActDet" + o.reqActID); // Activate page change
   return false;
});

$("#pgActDet").live("pagebeforeshow", function () {
   // Inject dynamic content during this event.    
   var act = $("#divActLst").data("act"); // Get act info from local storage.
   GetActDet(act);
});

function GetActDet(act) {                   
   // Request data via ajax.  If succesful, jump to GetActDetOK.
   var args = '{ActID: ' + act.actID + '}', url = gSvcUrl + "GetDetActivity";
   ..
}

function GetActDetOK(objAct, act) {
   // Format data via template "tplActDet".              
   var cbeg = "//<![" + "CDATA["; var cend = "//]" + "]>"; // Remove CDATA brackets.
   var rslt = tmpl("tplActDet", { dd: objAct }).replace(cbeg, "").replace(cend, "");

   var $divDet = $("#divActDet");
   $divDet.empty().html(rslt).trigger("create");            
   ..
}
于 2012-09-13T19:33:32.630 に答える