如何使用 JSON 数据动态填充 jQuery Mobile 页面？答案

【问题标题】：How do I dynamically populate jQuery Mobile pages using JSON data?如何使用 JSON 数据动态填充 jQuery Mobile 页面？
【发布时间】：2016-06-01 22:27:08
【问题描述】：

我正在尝试从一些外部 JSON (http://ip-api.com/json) 获取数据。然后我想使用键来动态填充列表视图。我希望每个列表项都是一个链接，当您单击该链接时，jQuery Mobile 页面将包含键的匹配值。我有两个 jQuery Mobile 页面，一个是主页，一个是另一个。

我试图通过将第二个“data-role=page”div 的 id 更改为当前关键数据，并将关键数据附加到 h2，并将值数据附加到 p 来实现这一点。它正在创建正确的键列表，但是当我单击第一项时， h2 包含所有键，而 p 包含所有值。如何修改这一点，以便通过单击相应的键列表项使每个键/值对最终成为当前正在创建的任何 jQuery Mobile 页面的 h2 和 p？

我一直在尝试使用来自 How to populate a jQuery Mobile ListView with JSON data? 的代码，但由于它没有使用外部 JSON，所以我无法让它正常工作。

<!DOCTYPE html>
<html>
    <head>
        <title>Geo-Location Data</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
        <link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="assets/js/geoLocation.js"></script>
    </head>
    <body>
        <div data-role="page" id="homePage"> 
            <div data-role="header">
                <h1>Geo-Location Data</h1>
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="collapsible" data-collapsed="true">
                    <h2>Click here for Geo-Location Data</h2>
                    <ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="user" data-autodividers="true">
                    </ul>
                </div>
            </div>
        </div>
        <div data-role="page" id="dataPage"> 
            <div data-role="header">
                <h2 id="dataHeading"></h2>
            </div>
            <div data-role="content">
                <p></p>
            </div>
        </div>
    </body>
</html>

$(document).ready( function() {
    $.getJSON("http://ip-api.com/json", function(data){
        $.each(data, function(key, val){
            $("ul#list").append('<li>' + '<a href="#' + key + '" data-transition="slide">'+ key + '</a>' + '</li>');
            $("ul#list").listview("refresh");
            $("div#dataPage").attr("id", key);
            $("h2#dataHeading").append(key);
            $("p").append(val);
        });
    });
})

【问题讨论】：

标签： javascript jquery json jquery-mobile

【解决方案1】：

您正在使用 $.each 循环，因此它会在循环遍历 json 数据时不断将 $("h2#dataHeading").append(key); 和 $("p").append(val); 附加到第二页，因此它实际上并没有创建单独的页面。它所做的只是更改dataPage 页面的id 一次，此后它将无法找到$("div#dataPage")，所以我很惊讶项目中的所有链接都可以正常工作，除了第一个链接。

更有效的方法是使用data-*属性将key和val直接存储在列表项上，单击时抓取它们，附加到第二页并动态打开第二页。这减少了对单独页面的需求，同时保持 DOM 小

例如

$(document).ready( function() {
    $.getJSON("http://ip-api.com/json", function(data){
        $.each(data, function(key, val){
            $("ul#list").append('<li data-key="'+key+'" data-val="'+val+'"><a>'+ key + '</a></li>');
            $("ul#list").listview("refresh");
        });
    });

//The list item click function
$("#list> li").on("click", function() {
var key= $(this).attr("data-key");
var val= $(this).attr("data-val");
$("#dataHeading").empty().append(key);
$("p").empty().append(val);
$(":mobile-pagecontainer").pagecontainer("change", "#dataPage",  { transition: "slide" });
});

});

我建议将$(document).ready 替换为pagecreate 之类的东西，因为JQM 最适合内置page Events

使用$(":mobile-pagecontainer") 时，您也可以将数据发送到页面，但您需要另一个函数，例如pagebeforeshow，以便在页面显示之前将数据附加到页面——如果您决定这样做，请阅读支持哪些版本的注释。 JQM 弃用了版本中的一些事件以支持新的替换事件

【讨论】：

【解决方案2】：

解决方案。起作用的是完全放弃第二个 JQM 页面，并通过将数据附加到 JavaScript 中的正文来创建它。这是更新的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Geo-Location Data</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="assets/css/themes/geoLocation.css" />
        <link rel="stylesheet" href="assets/css/themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="assets/js/geoLocation.js"></script>
    </head>
    <body>
        <div data-role="page" id="homePage"> 
            <div data-role="header">
                <h1>Geo-Location Data</h1>
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="collapsible" data-collapsed="true">
                    <h2>Click here for Geo-Location Data</h2>
                    <ul id="list" data-role="listview" data-filter="true" data-inset="true" data-icon="arrow-r" data-autodividers="true">
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

$(document).ready( function() {
    $.getJSON("http://ip-api.com/json", function(data){
        $.each(data, function(key, val){
            $("ul#list").append('<li>' + '<a href="#' + key + '" data-transition="slide">'+ key + '</a>' + '</li>');
            $("body").append('<div data-role="page" id="'+ key +'"><div data-role="header" id=""><h2 id="dataHeading"></h2 ></div><div data-role="content"><p>'+ val +'</p></div></div>');
            $("ul#list").listview("refresh");
        });
    });
});

【讨论】：