Question

JQUERY Mobile初学者问题：我在简单的多页JQUERY Mobile'App'中有两页。当用户导航到PAGE2时，我想进行AJAX调用以获取包含人员+ DB ID对列表的JSON对象。我想在PAGE2上将人员列表显示为按钮。

代码段：

<div id="PAGE2" data-role="page">
  <div class="ui-content">
     // I want buttons to appear sequentially here
  </div>
</div>

PAGE2是我的“占位符”，用于填充：

<input type="button" id="id1" name="id1" value="Bob Smith"/>
<input type="button" id="id2" name="id2" value="Jane Doe"/>
<input type="button" id="id3" name="id3" value="Kayla Kaye"/>

我还需要在脚本中添加一个“click”事件处理程序来响应按钮。对于所有按钮，反应都是相同的（用人员细节动态填充PAGE3，但我想如果我看到如何正确处理PAGE2群体，我可以解决这个问题）。使用骨架动态“创建”PAGE2的正确方法是什么？

Answer 1

如果允许jquery：

    var elements = { id1:'Bob Smith', id2:'Jane Doe', id3:'Kayla Kaye'};
    $.each( elements, function( key, value ) {
        $("#PAGE2 .ui-content").append('<input type="button" id="' + key + '" name=" + key " value " + value +'"/>');
    }

Answer 2

你可以试试这个

$('#PAGE2').on('pagebeforeshow', function(){

    var people = [
      { name:'Bob Smith', age:'56', place:'London'},
      { name:'John', age:'65', place:'USA'},
    ];

  var btns;

   $.each(people,function(indx,ppl){

      btns = btns + '<input type="button"  name="id1" value="' +  ppl.name +'"/>';

    });

   $('#content_div').html(btns);

});

将id设置为div内容为content_div

Answer 3

这是 DEMO

使用这样的3页设置（我已经为按钮和细节添加了容器div）：

<div data-role="page" id="PAGE1">
     <div data-role="header">
        <h1>PAGE 1</h1> 
    </div>  
    <div role="main" class="ui-content">
        <a href="#PAGE2" class="ui-btn">Go to page 2</a>
    </div> 
</div>  

<div data-role="page" id="PAGE2">
     <div data-role="header">
        <h1>PAGE 2</h1> 
    </div>  
    <div role="main" class="ui-content">
        <div id="thePeople"></div>
    </div> 
</div>  

<div data-role="page" id="PAGE3">
     <div data-role="header">
        <a data-rel="back" class="ui-btn ui-btn-icon-left ui-icon-back">Back </a>
        <h1>PAGE 3</h1> 
    </div>  
    <div role="main" class="ui-content">
        <div id="theDetails"></div>
    </div> 
</div>

您可以使用pagecontainer小部件的beforeshow事件来进行ajax调用：

http://api.jquerymobile.com/pagecontainer/#event-beforeshow

在我的例子中，我正在检查你来自哪里以及你要去哪里。所以从PAGE1到PAGE2，我进行AJAX调用并创建按钮。但是如果从PAGE3返回到PAGE2，我只留下已经创建的按钮。 Ater将按钮添加到页面，确保并在容器上调用 .enhanceWithin() ，以便jQM增强按钮。

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var prevID = ui.prevPage.prop("id");
    var newID = ui.toPage.prop("id");

    if (prevID == "PAGE1" && newID == "PAGE2") {
        //we have come from page 1 to page 2, so make AJAX call and populate page 2
         var data = [
              { "id": "id1", "name":'Bob Smith'},
              { "id": "id2", "name":'Jane Doe'},
              { "id": "id3", "name":'Kayla Kaye'},
        ];

        var buttons = '';
        $.each(data, function(indx){
            buttons += '<input type="button" name="' + this.id + '" value="' +  this.name +'"/>';
        });
        $("#thePeople").empty().append(buttons).enhanceWithin();  
    }
});

最后，当创建PAGE2时，我使用 event delegation 为可能添加的任何按钮创建点击事件（使用事件委派，按钮不需要在事件被约束时存在）。在这个例子中，获取单击按钮的id / name，获取详细信息（另一个AJAX调用？），填充PAGE3，然后使用pagecontainer widget更改方法导航到PAGE3：

http://api.jquerymobile.com/pagecontainer/#method-change

$(document).on("pagecreate","#PAGE2", function(){ 
    $(document).on('click', '#thePeople input[type="button"]', function(e){
        var personid = $(this).prop("id");
        var name = $(this).val();
        $("#theDetails").text('Details for ' + name);
        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#PAGE3", { transition: "slide" });
    });
});

<强> DEMO

动态填充JQUERY Mobile Multi-Page页面

3 个答案: