Question

我想知道下面列出的注入动态内容的程序是否在方法上是正确的。该方法基于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?).   
    }

Answer 1

您可以取消使用changePage语句的原因是您没有阻止beforepagechange事件中的默认行为。当事件被触发时，JQM将运行您的指令并继续其正常行为，即页面切换。这意味着两件事：如果您正在进行某些异步操作（可能会这样做），它可能没有等待您的操作完成，如果您碰巧执行了mobile.changePage，它将使您处于无限循环中。处理这种情况的正确方法是在调用GetActDet之前添加e.preventDefault();，并在检索/生成页面内容后调用changePage。

Answer 2

我想，我发现了问题所在。出于某种原因，click事件被触发两次。为了消除这种烦恼，我通过die（）重置处理程序。这可能解释了为什么$ .mobile.changePage（“＃pgActDet”）是不必要的。

在重写代码时，我使用“pagebeforeshow”事件在详细信息页面中注入动态内容。事件“pagebeforechange”保持不变。该代码改编自文章：jQuery Mobile - Ajax - Dynamic content - Passing parameters ，用“pagebeforeshow”代替“pageshow”。对于那些感兴趣的人，摘录如下所示。

**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");            
   ..
}

JQM - 辩论加载动态内容的正确方法

2 个答案: