Jquery移动1.4.5动态页面中的动态链接列表

Jquery mobile 1.4.5 dynamic pages from dynamic list of links

本文关键字：动态 链接 列表 Jquery 移动      更新时间：2023-09-26

我有一个动态列表，从json数据填充，我想当我们点击列表项导航到相应的动态页面。

我的json数据的形式是

{"mydata":[
       {
       "myId":"1",
       "thename":"This is first name",
       "desciption":"This is the first description"
    },
           {
       "myId":"2",
       "thename":"This is second name",
       "desciption":"This is the second description"
    }]}
html:

<div data-role="page" id="ccc">
<div data-role="content">
    <ul id="mylist" data-role="listview" data-inset="true">
    </ul>
 </div>
 </div>

:

   $.getJSON('https://api.myjson.com/bins/4khhg', function(data) {
    var output="";
    for (var i in data.mydata) {
        output+="<li>" + 
        "<a href='"#page" + data.mydata[i].myId + "'">" + 
        "<h3>" + data.mydata[i].thename + "</h3>" +
        "<p>" + data.mydata[i].desciption + "</p>" + "</a>" +
        "</li>";
        }
    output+="";
    document.getElementById("mylist").innerHTML=output;
 $("#mylist").listview('refresh');
    });

  $(document).on("pagebeforeshow", "#ccc", function () {
  $.getJSON('https://api.myjson.com/bins/4khhg', function(data) {
    var newpage="";
    var value=data.mydata[i].myId;
    var name=data.mydata[i].thename;
    var desc = data.mydata[i].desciption;
    for (var i in data.mydata) {
        newpage+="<div data-role='"page'" id='"page" + value + "'">";
        newpage+="<div data-role='"header'">"+ "<a data-role='"button'" data-rel='"back'" data-icon='"back'">Back</a>" +"<h3>" + name +  "</h3></div>";
        newpage+="<div role='"main'" class='"ui-content'">" + desc +  "</div> </div>";
        }
newpage += "";
    });
$('body').append(newpage);
          });

我不知道为什么这不能工作!

这里有一个小提琴http://jsfiddle.net/twjjL53r/2/

尝试将列表和页面的创建合并到一个方法中(用于创建页面的代码有一些逻辑错误):

$.getJSON('https://api.myjson.com/bins/4khhg', function(data) {
        var output="";
        var newpage="";
        for (var i in data.mydata) {
            output+="<li>" + 
            "<a href='"#page" + data.mydata[i].myId + "'">" + 
            "<h3>" + data.mydata[i].thename + "</h3>" +
            "<p>" + data.mydata[i].desciption + "</p>" + "</a>" +
            "</li>";
        newpage+="<div data-role='"page'" id='"page" + data.mydata[i].myId + "'">";
        newpage+="<div data-role='"header'">"+ "<a data-role='"button'" data-rel='"back'" data-icon='"back'">Back</a>" +"<h3>" +  data.mydata[i].thename +  "</h3></div>";
        newpage+="<div role='"main'" class='"ui-content'">" + data.mydata[i].desciption +  "</div> </div>";
        }
        output+="";
        newpage += "";
        $('body').append(newpage);
        $("#mylist").html(output).listview('refresh');
});
<

更新strong>小提琴

如果列表可以在每次访问页面时更改，则使用pagebeforeshow，并且只创建不存在的页面:

$(document).on("pagebeforeshow", "#ccc", function () {    
    $.getJSON('https://api.myjson.com/bins/4khhg', function(data) {
            var output="";
            var newpage="";
            for (var i in data.mydata) {
                output+="<li>" + 
                "<a href='"#page" + data.mydata[i].myId + "'">" + 
                "<h3>" + data.mydata[i].thename + "</h3>" +
                "<p>" + data.mydata[i].desciption + "</p>" + "</a>" +
                "</li>";
                //see if page already exists in DOM
                if ($("#page" + data.mydata[i].myId).length == 0) {
                    newpage+="<div data-role='"page'" id='"page" + data.mydata[i].myId + "'">";
                    newpage+="<div data-role='"header'">"+ "<a data-role='"button'" data-rel='"back'" data-icon='"back'">Back</a>" +"<h3>" +  data.mydata[i].thename +  "</h3></div>";
                    newpage+="<div role='"main'" class='"ui-content'">" + data.mydata[i].desciption +  "</div> </div>";
                }
            }
            output+="";
            newpage += "";
            $('body').append(newpage);
            $("#mylist").html(output).listview('refresh');
    });
});

相关文章：