我在这里使用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 ?(很抱歉,我对此感到非常抱歉,因为我确实>。<非常感谢您的帮助!)
最佳答案
解决方案
是的。可能有两个页面,一个用于显示数据,另一个用于显示单击项的详细信息。我不得不引入一些旧的东西,这是我在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执行以下操作li
一样,从具有所有数据的数组中获取第4个对象。 $("#details-page").data("info", info[this.id]);
changePage
重定向到第二页,如下所示:$.mobile.changePage("#details-page");
pagebeforeshow
事件从该页获取数据(单击上一页中的标记时,该数据存储在此页中。那就是所有的人!
完整的代码
香港专业教育学院附加了与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/
关于json - 如何用JSON数据填充jQuery Mobile ListView?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18051227/