Question

我正在使用HTML和jQuery Mobile（JQM）开发一个webapp，所以我对此非常陌生。我在这里要做的是用名单列表填充JQM列表视图。这些名称中的每一个都将链接到显示个人数据的新页面（全名，地址，出生日期等）。

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

问题现在我有100个人填充该列表视图。我认为有一种更简单的方法可以做到这一点，而不是手动为所有这些人创建100多个html文件吗？

我听说过这个JSON的东西可能有用，但是从零计算知识的背景来看，我真的不明白它是如何工作的。有人请说明我该怎么做？

非常感谢！

编辑：我正在使用Dreamweaver CS5.5进行编码。对于我负责开发的这个webapp，我得到了一个使用JQM和Backbone.js的“模板”或排序。因此，单个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的JQM代码将位于HTML文件的<div data-role=content>部分内。如何使用JSON数据填充此列表视图呢？

（道歉，如果我在这听起来非常noob，因为我真的是＆gt;。＆lt;非常感谢帮助！）

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用于在列表视图中显示数据。第二页#details-page用于所点击的项目的信息。 这就是你需要的一切。只有两个页面，不超过这个页面。因此，每次点击发生时，您都可以通过JavaScript执行以下操作

从阵列中获取数据的当前值。就像你单击列表中的第4个li一样，从数组中获取包含所有数据的第4个对象。
将其存储在第二页的数据变量中，以便以后检索。像这样：
```
$("#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/

Answer 2

你可以尝试这样的事情

的更新 的

Html Page

<div data-role="page" id="testpage"> <div data-role="content"> <ul data-role="listview" id="listitem" data-divider-theme="a" data-inset="true"> </ul> </div> </div>

的javascript

$(document).on("pageinit", "#testpage", function(){ $.getJSON("example.json", function(data){ var output = ''; $.each(data, function(index, value){ output += '<li><a href="#" id="' + data + '">' +data+ '</a></li>'; }); $('#listitem').html(output); }); });

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

2 个答案:

解决方案

完整代码

演示