JQM-辩论正确的方法来加载动态内容 [英] JQM - Debating correct approach to load dynamic content

问题描述

我想知道下面概述的用于注入动态内容的过程是否正确.该方法基于jQM的动态页面生成可以消除明显声明的文档($ .mobile.changePage).

I wonder if the procedure outlined below for injecting dynamic content is methodically correct. The approach is based on a slightly modified piece of code described in jQM's Dynamic Page Generation doc that does away with a noticeable statement ($.mobile.changePage).

假设该页面包含2个虚拟页面("pgActLst"和"pgActDet").虚拟页面"#pgActLst"包含多个锚点，这些锚点通过PK指向特定范围内的各种活动； "#pgActDet"详细说明与所选PK相关的活动细节.

Assume the page consists of 2 virtual pages ("pgActLst" and "pgActDet"). Virtual page "#pgActLst" contains a collection of anchors that point via PKs to various activities over a specific range; "#pgActDet" details activity specifics associated to the selected PK.

我的问题解决了$ .mobile.changePage(#pgActDet")的用法.在我的情况下(锚)，似乎不需要包含此语句(实际上会导致无限循环).请注意，该代码正确刷新了内容.下面概述的方法是合理的还是从长远来看会刺痛我?据我所知，步骤S1在S2之前触发.

My question addresses the usage of $.mobile.changePage("#pgActDet"). It seems that in my case (anchors), inclusion of this statement becomes unnecessary (and actually gives rise to an infinite loop). Note that the code refreshes content correctly. Is the approach outlined below sound or could it bite me in the long run? As far as I can see, step S1 fires before 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?).   
    }

推荐答案

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

I think, I figured out the problem. For some reason, the click event fired twice. To eliminate this annoyance, I reset the handler via die(). This probably explains why $.mobile.changePage("#pgActDet") was unnecessary.

在重写代码时，我使用了"pagebeforeshow"事件在详细信息页面中注入了动态内容.事件"pagebeforechange"保持不变.该代码改编自以下文章: jQuery Mobile-Ajax-动态内容-传递参数，用"pagebeforeshow"代替"pageshow".对于那些感兴趣的人，下面显示摘录.

In rewriting the code, I used the "pagebeforeshow" event to inject dynamic content in the details page. Event "pagebeforechange" remains untouched. The code is adapted from the article: jQuery Mobile - Ajax - Dynamic content - Passing parameters , substituting "pagebeforeshow" for "pageshow". For those interested, an excerpt is shown below.

**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-辩论正确的方法来加载动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！