Question

我有一个动态列表，它是从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>

到目前为止的js：

   $.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/

Answer 1

尝试将列表和页面的创建组合到一个方法中（用于创建页面的代码有一些逻辑错误）：

$.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');
});

更新了 FIDDLE

如果每次访问该页面时列表都可以更改，请使用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');
    });

});

<强> DEMO

Jquery移动1.4.5动态页面来自动态链接列表

1 个答案: