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

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>标签开头,然后以a开头,之后<div data-role=content>以a <div data-role=footer>开头,在开始和结束标签中都有各自的内容.

对于我的列表视图,listview的JQM代码将在<div data-role=content>HTML文件的一部分内.如何用JSON数据填充此列表视图呢？

(抱歉,如果我在这听起来非常棒,因为我真的很>.<非常感谢帮助!)

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执行以下操作

• 从数组中获取当前数据值.就像你单击li列表中的第4个,从数组中获取包含所有数据的第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

你可以尝试这样的事情

更新

网页

   <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);
        });
    });