动态填充 JQUERY 移动多页页面答案

【问题标题】：Dynamically Populate JQUERY Mobile Multi-Page Page动态填充 JQUERY 移动多页页面
【发布时间】：2015-09-03 22:43:57
【问题描述】：

JQUERY Mobile 初学者问题：我的简单多页 JQUERY Mobile“应用程序”中有两个页面。当用户导航到 PAGE2 时，我想做一个 AJAX 调用来获取一个 JSON 对象，其中包含人员列表 + DB ID 对。我想将人员列表显示为 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"/>

我还需要在脚本中添加一个“点击”事件处理程序来对按钮做出反应。所有按钮的反应都是相同的（使用人员详细信息动态填充 PAGE3，但我想如果我看到如何正确处理 PAGE2 填充，我可以弄清楚）。使用适当的骨架动态“创建” PAGE2 的正确方法是什么？

【问题讨论】：

标签： javascript jquery html ajax jquery-mobile

【解决方案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 +'"/>');
    }

【讨论】：

【解决方案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

【讨论】：

【解决方案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，我只留下已经创建的按钮。在将按钮添加到页面后，请确保并在容器上调用 .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/名称，获取详细信息（另一个 AJAX 调用？），填充 PAGE3，然后使用 pagecontainer 小部件更改方法导航到 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

【讨论】：