9

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).

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.

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?

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?

Thanks a lot!

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

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.

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?

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

4

2 回答 2

16

解决方案

是的。它可能有两个页面，一个用于显示您的数据，一个用于显示单击项目的详细信息。我不得不引入一些旧的东西，我在 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/

于 2013-08-05T19:33:00.483 回答
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);
        });
    });
于 2013-08-05T08:50:57.720 回答