我开发了一个带有phonegap和jquery mobile的应用程序.
我有100个项目,需要单页. html对所有人来说都是一样的.它只是显示名称和一些信息.
如何解析我的html中的1个项目并显示信息而不创建100个单个html文件？我把所有的信息都当作json.
我有100个项目,需要单页. html对所有人来说都是一样的.它只是显示名称和一些信息.
如何解析我的html中的1个项目并显示信息而不创建100个单个html文件？我把所有的信息都当作json.
解决方法
您可能需要一种模板,您可以自己动手或使用统一的方法.只需在互联网上搜索“jQuery模板”,这将让您了解此类任务的多种可能性.你真的有很多方法可以达到你所需要的,
如果你需要互动,双向绑定和一个伟大的SO支持者社区,恕我直言淘汰(或类似)是一个很好的选择,正如在前一个答案中已经指出的那样.
如果您只需要以简单直接的方式显示数据,nano是您可以找到的最小的模板引擎,因此,这是一个简单的JQM存根,有两个页面使用这种方法：
var all = [],current = {};
var listTemplate = [
'<li class="ui-first-child ui-last-child">','<a href="#page-card" data-id="{id}" class="ui-btn ui-btn-icon-right ui-icon-carat-r">','<h2>{name}</h2>','<p><strong>{address.city}</strong></p>','<p>{email}</p>','<p class="ui-li-aside">id: <strong>{id}</strong></p>','</a>','</li>'
].join("");
var cardTemplate = [
'<h3 class="ui-bar ui-bar-a ui-corner-all">{name}</h3>','<div class="ui-body ui-body-a ui-corner-all">','<p>{website}</p>','<p>{phone}</p>','<p>{address.street}</p>','<p>{address.city}</p>','</div>'
].join("");
function nano(template,data) {
return template.replace(/\{([\w\.]*)\}/g,function(str,key) {
var keys = key.split("."),v = data[keys.shift()];
for (i = 0,l = keys.length; i < l; i++) { v = v[keys[i]]; }
return (typeof v !== "undefined" && v !== null) ? v : "";
});
}
$(document).on("vclick","#page-list li>a",function() {
var id = $(this).data("id");
current = $.grep(all,function(item) {
return item.id == id;
})[0];
});
$(document).on("pagecreate","#page-list",function() {
var $ul = $(this).find("ul");
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",method: 'GET',crossDomain: true,dataType: "jsonp",complete: function() {
$ul.listview().listview("refresh");
},success: function(result) {
all = result;
$.each(all,function(i,item) {
$ul.append(nano(listTemplate,item))
});
}
});
});
$(document).on("pagebeforeshow","#page-card",function() {
$(this).find("[data-role=content]").empty().append(nano(cardTemplate,current)).trigger("updatelayout");
});
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page-list"> <div data-theme="a" data-role="header" data-position="fixed"> <h3>Users</h3> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> </ul> </div> </div> <div data-role="page" id="page-card"> <div data-theme="a" data-role="header" data-position="fixed"> <h3>Details</h3> <a href="#" data-rel="back" class="ui-btn-left">Back</a> </div> <div data-role="content"> </div> </div> </body> </html>
