如何填充JSON数据的jQuery Mobile的ListView的？ [英] How to populate a jQuery Mobile ListView with JSON data?

问题描述

我开发web应用程序在这里使用HTML和jQuery移动（JQM），所以我pretty在这个新的。
我想在这里做的是填充的ListView JQM与名称的列表。
与正在显示的个人资料（姓名，地址，出生日期等），每次这个名称将链接到一个新的页面。

I'm developing a webapp here using HTML and jQuery Mobile (JQM), so I'm pretty new at this. What I'm trying to do here is to populate a JQM listview with a list of names. Each of this names will link to a new page with personal data being displayed (Full name, address, date of birth, etc).

目前，因为我的知识的缺乏，我手动创建每个个人（例如johnDoe.html为一个虚构的人物李四先生）一个新的.html文件。然后，我通过功能物理链接列表中的元素这个HTML文件。

Currently, because of my lack of knowledge, I manually create a new .html file for EACH individual person (e.g. johnDoe.html for a fictional character Mr. John Doe). I then physically link the list elements to this html file via the function.

但问题是我现在有100个人以上用来填充列表视图。我认为有一个更简单的方法来做到这一点，而不是手动创建100+ HTML文件，所有这些个别人士对吧？

Problem is now I have 100 over individuals to populate that list view. I think that there's an easier way to do this rather than manually creating 100+ html files for all these individual persons right?

我听说过这个JSON事情，可能会做的伎俩，而是从零计算知识背景的，我真的不明白它是如何工作的。会有人请阐明我怎么能做到这一点一些轻？

I heard of this JSON thing that might do the trick, but coming from a background of ZERO computing knowledge, I don't really understand how it works. Will someone please shed some light on how can I do this?

非常感谢！

编辑：
我使用Dreamweaver CS5.5做编码。对于这个web应用程序，我是负责制订，我得到了一个使用JQM和Backbone.js的模板或排序。这样，莫名其妙的多页结构，一个HTML文件中似乎并没有工作。从我在模板中看到，每个HTML文件中有一个具有code，看起来像这样相应的JS文件：

I'm using Dreamweaver CS5.5 to do the coding. For this webapp that I'm tasked to develop, I was given a "template" or sorts that uses JQM and Backbone.js. As such, somehow the "multi-page" structure for a single HTML file doesn't seem to work. From what I see in the template, every HTML file has a corresponding JS file that has code that looks like this:

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页面，它们都开始于一个＆LT; D​​IV数据角色=头＆GT; 标签，那么＆LT; D​​IV数据 - 角色=含量＆GT; ，以＆LT结束前，格数据角色=页脚＆GT; ，所有的开始和结束标记在各自的内容

For the HTML pages, they all begin with a <div data-role=header> tag, then a <div data-role=content>, before ending with a <div data-role=footer>, all with their respective content within the opening and closing tags.

有关我的问题的列表视图中，JQM code为ListView将是＆LT中; DIV数据角色=含量＆gt;在HTML文件的部分。我怎么能填充此列表视图与JSON数据呢？

For my listview in question, the JQM code for the listview will be within the <div data-role=content> part of the HTML file. How can I populate this listview with JSON data then?

（道歉，如果我的声音在这个极其小白，因为我真的很>＆LT;！真的AP preciate的帮助下）

(Apologies if I sound extremely noob at this, because I really am >.< Really appreciate the help!)

推荐答案

是的。其可能有两页，并使用一个用于显示数据和一个显示在点击的项目的详细信息。我有一些旧的东西拉，演示我做的时候JQM是1.1版本，并将其更改为近代。无论如何，考虑到我有一个这样的数组：

Solution

Yes. Its possible to have two pages and use one for displaying your data and one to show up the details of the clicked item. I had to pull in some old stuff, a demo I made when jQM was in version 1.1 and change it to modern times. Anyway, considering I have an array like this :

[
    {
        "id": 0,
        "age": 31,
        "name": "Avis Greene",
        "gender": "female",
        "company": "Handshake",
        "email": "[e-mail]",
        "phone": "[phone]",
        "address": "518 Forrest Street, Washington, New York, 3579"
    },
    {
        "id": 1,
        "age": 31,
        "name": "Dunn Haynes",
        "gender": "male",
        "company": "Signity",
        "email": "[e-mail]",
        "phone": "[phone]",
        "address": "293 Dean Street, Dante, Oregon, 5864"
    }
]

我随机生成的东西，使得它高达100个元素，就像你似乎怎么有。我有两页。

I randomly generated stuff and made it upto 100 elements, just like how you seem to have. I have two pages.

<!--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>

第一页，＃信息页是显示在列表视图的数据。第二页，＃详细信息页是单击项目的信息。的这就是你所需要的。只有两页，不多说。的所以每次点击发生时，你做了通过JavaScript下面

The first page, #info-page is for showing data in a listview. The second page, #details-page is for the info of the clicked item. Thats all you need. Only two pages, not more than that. So every time a click happens, you do the following through JavaScript

• 获得从所述阵列的数据的当前值。就像如果你点击列表中的第4个里，得到它具有所有的数据阵列的第4个对象。



• 它存储在第二页的数据的变量，以便它可以在以后检索。事情是这样的：

• Get the current value of data from the array. Like if you click on the 4th li in the list, get the 4th object from the array which has all the data.

• Store it in the data variable of the second page, so that it can be retrieved later. Something like this:

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

然后，使用重定向到第二页 changePage ，就像这样：

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

在第二页打开后，使用 pagebeforeshow 事件来从页面的数据（你存储到这个页面时在$ p标签被点击$ pvious页。

When the second page opens, use the pagebeforeshow event to get the data from the page (which you stored into this page when the tag in the previous page was clicked.

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

Use some HTML layout to populate the data. I used jQM's grids.

这是所有乡亲！

伊夫附与HTML使用JS的。其言自明。阅读在code内嵌批注，你就能够理解了。假设信息是图片中的数组。

Ive attached the JS used with the HTML. Its self explanatory. Read the inline comments in the code and you'll be able to understand more. Assume info is the array in picture.

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

这篇关于如何填充JSON数据的jQuery Mobile的ListView的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！