如何在不创建 100 个单个 html 文件的情况下从 json 为 100 个项目创建 html? [英] How to create html from json for 100 items without creating 100 single html files?
问题描述
我使用 phonegap 和 jquery mobile 开发了一个应用程序.我有 100 个项目,需要单页.所有这些的 html 都是相同的.它只是显示名称和一些信息.如何在不创建 100 个单个 html 文件的情况下将 1 个项目解析为我的 html 并将其与信息一起显示?我有 json 格式的所有信息.
用户点击这 100 个项目之一,然后新页面应出现
你可能需要一种模板,你可以自己做,也可以使用统一的方法.只需在 Internet 上搜索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>{名称}</h2>','<p><strong>{address.city}</strong></p>','<p>{email}</p>','<p class="ui-li-aside">id: <strong>{id}</strong></p>','</a>','</li>'].加入("");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>{网站}</p>','<p>{电话}</p>','<p>{address.street}</p>','<p>{address.city}</p>','</div>'].加入("");功能纳米(模板,数据){return template.replace(/{([w.]*)}/g, function(str, key) {var keys = key.split("."), v = data[keys.shift()];for (i = 0, l = keys.length; i a", function() {var id = $(this).data("id");当前 = $.grep(all, function(item) {返回 item.id == id;})[0];});$(document).on("pagecreate", "#page-list", function() {var $ul = $(this).find("ul");$.ajax({url: "https://jsonplaceholder.typicode.com/users",方法:'获取',跨域:真,数据类型:jsonp",完成:函数(){$ul.listview().listview("刷新");},成功:功能(结果){所有 = 结果;$.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");});
<头><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>头部><身体><div data-role="page" id="page-list"><div data-theme="a" data-role="header" data-position="fixed"><h3>用户</h3>
<div data-role="内容"><ul data-role="listview" data-inset="true" data-filter="true">
<div data-role="page" id="page-card"><div data-theme="a" data-role="header" data-position="fixed"><h3>详情</h3><a href="#" data-rel="back" class="ui-btn-left">返回</a>
<div data-role="内容">