Jquery 如何从json为100个项目创建html，而不创建100个单独的html文件？

我用phonegap和jquery mobile开发了一个应用程序。 我有100个项目，需要它的单页。它们的html都是相同的。它只是显示姓名和一些信息。 如何将一个项目解析为html并显示信息，而不创建100个html文件？我所有的信息都是json

---

<>编辑：用户点击这100个项目中的一个，然后新页面出现“

”，你应该考虑使用一个简单的绑定库（如KokOutjs）将其构建为SPA。这将允许您使用单个页面更新数据

使用淘汰版的SPA教程（单击下拉列表并选择“单页应用程序”）：

在此处下载库：

---

当然，您可以使用像Angular这样的健壮框架，但仅仅设置一些简单的AJAX数据绑定并不是必需的。

您可能需要一种模板，您可以自己完成，也可以使用整合的方法。只需在internet上搜索“jQuery+模板”，这将使您了解执行此类任务的许多可能性。你真的有很多方法来实现你所需要的

如果您需要交互、双向绑定和强大的SO支持者社区，IMHO knockout.js（或类似的）是一个不错的选择，正如前面的回答中已经指出的

如果您只需要以简单明了的方式显示数据，那么这是您能找到的最小的模板引擎，因此，下面是一个简单的JQM存根，其中有两个页面使用这种方法：

var all=[]，current={}；
变量列表模板=[
“
”，
'',
“
”
].加入（“”）；
var cardTemplate=[
“{name}”，
'',
“{email}
”，
“{website}
”，
“{phone}
”，
“{address.street}
”，
“{address.city}
”，
''
].加入（“”）；
功能nano（模板、数据）{
返回模板。替换（/\{（[\w\.]*）\}/g，函数（str，键）{
var keys=key.split（“.”），v=data[keys.shift（）]；
对于（i=0，l=keys.length；ia”，函数（）{
var id=$（this.data（“id”）；
当前=$.grep（全部，函数（项）{
return item.id==id；
})[0];
});
$（文档）。在（“页面创建”，“页面列表”，函数（）上）{
var$ul=$（this.find（“ul”）；
$.ajax({
url:“https://jsonplaceholder.typicode.com/users",
方法：“GET”，
跨域：是的，
数据类型：“jsonp”，
完成：函数（）{
$ul.listview（）.listview（“刷新”）；
},
成功：功能（结果）{
全部=结果；
$。每个（全部，功能（i，项目）{
$ul.追加（nano（列表模板，项目））
});
}
});
});
$（文档）。在（“pagebeforeshow”上，“#PageCard”，函数（）{
$（this.find（“[data role=content]”）。empty（）.append（nano（cardTemplate，current））.trigger（“updatelayout”）；
});

使用者


细节
分享一个JSON示例。JSON是这样的：{“boolean”：true，“null”：null，“number”：123，“object”：{“a”：“b”，“c”：“d”，“e”：“f”}，“string”：“Hello World”}回答得不错@Klaxx注意到，若页面高度超过1000像素，则会丢失动画过渡。如果要维护动画，请尝试对listview进行分页。请注意：
pagebeforeshow
不推荐使用。在展示前使用
PageContainer
。但是，它不能附加到特定页面，因此，您可以在
vclick
listener中添加
pageContainerShow
的
one（）
时间侦听器。谢谢@Omar提供的注释！我会记在心里的mind@Omar你能解释一下你最后的评论吗？我需要在vclick中使用.on（'pagecontainerbeforeshow'）？非常感谢。你的解决方案有效。但是，当我将json文件复制到我的Godaddy服务器时。并更新了代码JS部分中的url，它不显示列表或卡片。请问怎么了？你的观点是什么？当然，有很多方法可以做到这一点，但最快的方法就是导入KO并添加绑定。