我用 phonegap 和 jquery mobile 开发了一个应用程序。 我有 100 个项目，需要单页。 html 对所有这些都是相同的。它只是显示名称和一些信息。 如何在不创建 100 个单个 html 文件的情况下将 1 项解析为我的 html 并将其与信息一起显示？我将所有信息都保存为 json。
编辑：用户单击这 100 个项目之一，然后将出现新页面
【问题讨论】：
标签： jquery html cordova jquery-mobile frontend
您可能需要一种模板，您可以自己完成或使用统一的方法。只需在互联网上搜索“jQuery + 模板”，这将使您了解此类任务的多种可能性。你真的有很多方法可以实现你所需要的，
如果您需要交互、双向绑定和强大的 SO 支持者社区，恕我直言，knockout.js（或类似的）是一个不错的选择，正如之前的回答中已经指出的那样。
如果您只需要以简单明了的方式显示数据，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>{email}</p>',
'<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>【讨论】：
pagebeforeshow 已弃用。使用pagecontainerbeforeshow。但是，它不能附加到特定页面，因此，您可以在vclick 侦听器中添加pagecontainerbforeshow 的.one() 时间侦听器。
您应该考虑使用像 KnockoutJS 这样的简单绑定库将其构建为 SPA。这将允许您使用单个页面更新数据。
使用 Knockout 的 SPA 教程（单击下拉菜单并选择“单页应用程序”）：
http://learn.knockoutjs.com/#/?tutorial=webmail
在此处下载库：http://knockoutjs.com/
当然，您可以使用像 Angular 这样的健壮框架，但这对于仅仅设置一些简单的 AJAX 数据绑定来说真的不是必需的。
【讨论】：