json - 如何用JSON数据填充jQuery Mobile ListView？

Question

我在这里使用HTML和jQuery Mobile(JQM)开发一个webapp，因此在这方面我还很新。
我在这里想要做的是用名称列表填充JQM ListView 。
每个名称都将链接到一个新页面，并显示个人数据(全名，地址，出生日期等)。

目前，由于缺乏知识，我为每个人手动创建了一个新的.html文件(例如，对于虚构人物John Doe先生来说是johnDoe.html)。然后，我通过函数将列表元素物理链接到此html文件。

现在的问题是，我有100个以上的人可以填充该 ListView 。我认为，比为所有这些个人手动创建100多个html文件，有一种更简便的方法来做到这一点吗？

我听说过这种可能有用的JSON内容，但是由于具有零运算知识的背景，我不太了解它是如何工作的。请问有人可以阐明我该怎么做吗？

非常感谢!

编辑:
我正在使用Dreamweaver CS5.5进行编码。对于我要开发的这个Web应用程序，给了我一个使用JQM和Backbone.js的"template"或排序方式。这样，单个HTML文件的“多页”结构似乎不起作用。根据我在模板中看到的内容，每个HTML文件都有一个对应的JS文件，该文件的代码如下所示:

define(['jquery',
        'underscore',
        'backbone',
        'helper',
        'views/phr/list',
        'text!templates/vpr2.html'
    ],
    function ($,
        _,
        Backbone,
        Helper,
        phrListView,
        tmpVpr2) {
        var view = Backbone.View.extend({
            transition: 'fade',
            reverse: true,
            initialize: function () {
                this.phrlistview = new phrListView();
            },
            render: function () {

                $(this.el).append(_.template(tmpVpr2, {}));

                console.log("Rendering subelements...");
                Helper.assign(this, {
                    '#phrListView': this.phrlistview
                });

                return this.el;
            }

        });

        return view;
    });

对于HTML页面，它们都以 <div data-role=header>标记开头，然后以 <div data-role=content>开头，然后以 <div data-role=footer>结尾，所有这些内容各自的内容都在开始和结束标记中。

对于有问题的 ListView ， ListView 的JQM代码将位于HTML文件的 <div data-role=content>部分内。然后如何用JSON数据填充此 ListView ？

(很抱歉，我对此感到非常抱歉，因为我确实>。<非常感谢您的帮助!)

Answer 1

解决方案

是的。可能有两个页面，一个用于显示数据，另一个用于显示单击项的详细信息。我不得不引入一些旧的东西，这是我在jQM处于1.1版中时制作的一个演示，并将其更改为现代版本。无论如何，考虑到我有一个像这样的数组:

[
    {
        "id": 0,
        "age": 31,
        "name": "Avis Greene",
        "gender": "female",
        "company": "Handshake",
        "email": "avisgreene@handshake.com",
        "phone": "+1 (845) 575-2978",
        "address": "518 Forrest Street, Washington, New York, 3579"
    },
    {
        "id": 1,
        "age": 31,
        "name": "Dunn Haynes",
        "gender": "male",
        "company": "Signity",
        "email": "dunnhaynes@signity.com",
        "phone": "+1 (829) 454-3806",
        "address": "293 Dean Street, Dante, Oregon, 5864"
    }
]

我随机生成了东西，并使其多达100个元素，就像您看起来的样子一样。我有两页。

<!--first page -->
<div data-role="page" id="info-page">
    <div data-role="header" data-theme="b">
         <h1> Information</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
            <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        </ul>
    </div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
    <div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>

         <h1>Employee Details</h1>

    </div>
    <div data-role="content"></div>
</div>

第一页 #info-page用于在 ListView 中显示数据。第二页 #details-page用于单击项的信息。那就是您所需要的。只有两页，不超过此数。因此，每次点击都会通过JavaScript执行以下操作

从数组中获取数据的当前值。就像单击列表中的第4个li一样，从具有所有数据的数组中获取第4个对象。

将其存储在第二页的data变量中，以便以后可以检索。像这样的东西:

$("#details-page").data("info", info[this.id]);

然后，使用changePage重定向到第二页，如下所示:

$.mobile.changePage("#details-page");

当第二页打开时，使用pagebeforeshow事件从该页获取数据(单击上一页中的标记时，该数据存储在此页中。

使用一些HTML布局来填充数据。我使用了jQM的网格。

那就是所有的人!

完整的代码

香港专业教育学院附加了与HTML一起使用的JS。其自我解释。阅读代码中的内联注释，您将能够了解更多信息。假设 info是图片中的数组。

//pageinit event for first page
//triggers only once
//write all your on-load functions and event handlers pertaining to page1
$(document).on("pageinit", "#info-page", function () {


    //set up string for adding <li/>
    var li = "";
    //container for $li to be added
    $.each(info, function (i, name) {
        //add the <li> to "li" variable
        //note the use of += in the variable
        //meaning I'm adding to the existing data. not replacing it.
        //store index value in array as id of the <a> tag
        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';
    });
    //append list to ul
    $("#prof-list").append(li).promise().done(function () {
        //wait for append to finish - thats why you use a promise()
        //done() will run after append is done
        //add the click event for the redirection to happen to #details-page
        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            //store the information in the next page's data
            $("#details-page").data("info", info[this.id]);
            //change the page # to second page. 
            //Now the URL in the address bar will read index.html#details-page
            //where #details-page is the "id" of the second page
            //we're gonna redirect to that now using changePage() method
            $.mobile.changePage("#details-page");
        });

        //refresh list to enhance its styling.
        $(this).listview("refresh");
    });
});

//use pagebeforeshow
//DONT USE PAGEINIT! 
//the reason is you want this to happen every single time
//pageinit will happen only once
$(document).on("pagebeforeshow", "#details-page", function () {
    //get from data - you put this here when the "a" wa clicked in the previous page
    var info = $(this).data("info");
    //string to put HTML in
    var info_view = "";
    //use for..in to iterate through object
    for (var key in info) {
        //Im using grid layout here.
        //use any kind of layout you want.
        //key is the key of the property in the object 
        //if obj = {name: 'k'}
        //key = name, value = k
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }
    //add this to html
    $(this).find("[data-role=content]").html(info_view);
});

演示版

我还制作了一个演示，您可以在jsfiddle.net上阅读有关此内容的更多信息。
这是链接: http://jsfiddle.net/hungerpain/52Haa/