0

我想知道下面概述的注入动态内容的过程是否有条不紊地正确。该方法基于 jQM 的Dynamic Page Generation文档中描述的一段稍作修改的代码，该代码取消了明显的声明 ($.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

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

在重写代码时，我使用“pagebeforeshow”事件在详细信息页面中注入动态内容。事件“pagebeforechange”保持不变。代码改编自文章：jQuery Mobile - Ajax - 动态内容 - 传递参数，用“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");            
   ..
}
于 2012-09-13T19:33:32.630 回答
0

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

于 2012-09-12T16:47:12.307 回答