Jquery mobile - 如何使用 XML 在预先存在的页面上动态创建内容

Question

第一次在这里发帖，请大家放心，哈哈。我目前正在尝试将内容加载到我已经为其编写 html 的“页面”中。我的 jquery 脚本正在从我的 xml 文件 content.xml 中读取数据。我的第一页加载正常，但我尝试向其中插入数据的页面中没有任何内容。我特意将每个页面创建为一个 shell，以避免数据 url 问题。

这是我的代码片段(有很多重复，所以没有必要全部放入):查询:

$(function () {
    $.ajax({
        type: "GET",
        url: "content.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {                                                   
    $(xml).find('Phonetic').each(function () {
    var a = 1;
    $test = $("s" +a).append('<div><div class=<div class="S3">' +
            $(this).find("S3").text() + 
            '</div>"S1">' + 
            $(this).find("S1").text() + 
            '</div><div class="S2">' + 
            $(this).find("S2").text() + 
            '</div><div class="S4">' +
            $(this).find("S4").text() + 
            '</div></div>');

    $test.page();
    a++;
});
    }

这是 html:

<div data-role="page" id="c1"> 
<div data-role="header"><h1>Test</h1></div> 
<div data-role="content" id="s1"></div> 
<div data-role="footer"><h1>Test release v1.0 - Android tablet test</h1></div> 
</div> 

任何帮助都会很棒!

Answer 1

我只有一页，关键是在您的文档中准备好 pagebeforechange 或 ondeviceready 函数。

$(document).bind("pagebeforecreate",function( e, data ){
      if ( typeof data.toPage === 'string' ){
           var p = $.mobile.path.parseUrl( data.toPage );

           if( u.hash.search( new RegExp( /^MyPageName/ ) ) !== -1 ) {
                $.mobile.showPageLoading();
                MyCodeToExecForThisPage( p, data.options );
                e.preventDefault();  // tell jquery i will create a page not him
           }
      } 
 });

这就是你的方式，你现在需要一个函数来处理页面并显示 html，这就是我所做的:

function SetPagesTemplate(  ){
$page = $("#AllPage"); // this is the name of my page in the index file
    $header = $page.children( "#AllHead" ); // my header so i can custom change
$content = $page.children( ":jqmData(role=content)" ); // the content area of page
$header.html( 'custom graphic or text' );
$content.html(''); // clear everything up
$footer = $page.children( "#allFoot" ); // hook into my footer bar
$footer.html( 'custom footer nav and links' );
 }

下面是导航到需要值的页面时显示的代码，例如 #person?personid=22 我的页面是 person，我将使用 id [personid] 并获取正确的信息，然后我将填充我的包含内容的所有页面，让 jquery 认为我实际上在#person 上。

 // take note here that i take in urlObj [ this was p ]  and options
function LoadPerson( urlObj, options ) {
  try{
// lets get the number sent by stripping everything out
    var id = urlObj.hash.replace( /.*personid=/,"" ),
    extra = "";
SetPagesTemplate(  ); // the code that sets the page so i dont have to repeat myself.

$.ajax({
    url: "http:\/\/" + domain + "/Ajax/MobilePersonProfile",
    type: "POST",
    dataType: "json",
    data: { id: id },
    crossDomain: true,
    success: function ( data ) {
        //loop through data create rows
        if( data.length === 0 ){ ThrowCustomAlert( 'Sorry, unable to load profile.', 'no profile available', true ); } 
        else { 

            // now deal with your data on this example your processed data would be called template
                    // all this page stuff was set up earlier so lets fill it
            $content.append("<section><nav id='profilescroll'>" + extra + template + "</nav></section>" );
            $page.page(); // make our page into a page
            options.dataUrl = urlObj.href;
            template = null;
            data = null;
              // above cleanup, on mobile device to keep memory leaks low
                            // now we navigate to our created page THIS
            $.mobile.changePage( $page, options );


            StartScroller( "profilescroll" );
            HideLoading(); // lets hide the page loading
        }
    },
    error: function ( jqXHR, textStatus, errorThrown ) { CustomError(errorThrown,'',"Profile",true); }
});
}
catch( ee ){ CustomError( ee.message, ee.description, "profile", true ); }

这就是你所需要的，它是我曾经使用过的所有东西，我认为我没有见过这样的例子我不得不基本上将我的整个应用程序变成这种工作方式以减少用作 phonegap 时 iphone 2 上的内存使用应用程序，使用完整的 ajax 导航非常非常快。

要注意的是，您只需要标签导航，在您的页面创建之前为您想要的每个页面设置一个新的 if。 w

希望对你有帮助

这里是我页面的 html:

 <div data-role="page" id="AllPage" class="body" style="overflow:hidden;">

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->