如何从json创建100个html项目而不创建100个单个html文件? [英] How to create html from json for 100 items without creating 100 single html files?
问题描述
我使用phonegap和jquery mobile开发应用程序。
我有100个项目,需要单个页面。 html对所有人来说都是一样的。这只是显示名称和一些信息。
如何解析1个项目到我的html并显示它的信息,而不创建100个单一的html文件?我将所有信息都记录为json。
编辑:用户点击这100个项目中的一个,然后出现新页面
您可能需要一种模板,您可以自己完成或使用综合方法。只需在互联网上搜索jQuery +模板,就可以了解这种任务的多种可能性。你真的有很多方法可以实现你所需要的,
如果你需要互动,双向绑定和一个伟大的SO支持者社区,恕我直言,淘汰赛.js(或类似的)是一个很好的选择,正如在以前的答案中已经指出的那样。
如果您只需要以简单直接的方式显示数据, nano 是您可以找到的最小的模板引擎,因此,这是一个简单的JQM存根,有两个页面使用这种方法:
var all = [],current = {}; var listTemplate = [ '< li class =ui-first-child ui-last-child>','< a href =#page-carddata-id ={id}class =ui-btn ui -btn-icon-right ui-icon-carat-r>','< h2> {name}< / h2>','< p>< strong&g t; {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(模板,数据){return template.replace(/ \ {([\\\\。] *)\} / g,function(str,key){var keys = key.split(。 ),v = data [keys.shift()];对于(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(所有函数(item){return item.id == id;})[0];}); $(document).on(pagecreate,#page-list,function(){var $ ul = $(this).find(ul); $ .ajax({url:https://jsonplaceholder.typicode.com/users,方法:'GET',crossDomain:true,dataType:jsonp,完成: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( ());}()();();}() snippet-code-html lang-html prettyprint-override> <!DOCTYPE html>< html>< head> < meta charset =utf-8> < meta name =viewportcontent =width = device-width,initial-scale = 1,user-scalable = no> < link rel =stylesheethref =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 =pageid =page-list> < div data-theme =adata-role =headerdata-position =fixed> < H3>用户和LT; / H3> < / DIV> < div data-role =content> < ul data-role =listviewdata-inset =truedata-filter =true> < / UL> < / DIV> < / DIV> < div data-role =pageid =page-card> < div data-theme =adata-role =headerdata-position =fixed> < H3>详情< / H3> < a href =#data-rel =backclass =ui-btn-left>返回< / a> < / DIV> < div data-role =content> < / DIV> < / div>< / body>< / html>
I develop an app with phonegap and jquery mobile. I have 100 items and need single pages for it. The html is the same for all of them. It´s just displaying names and some information. How can I parse 1 item to my html and display it with the information without creating 100 single html files? I have all the information as json.
EDIT: The user clicks on one of those 100 items and then the new page shall appear
You may need a kind of templating, you can do it by yourself or use a consolidated approach. Just search the internet for "jQuery + template" and this will give you an idea of the many possibilities for such a task. You have REALLY a lot of ways to achieve what you need,
If you need interaction, two-way binding and a great SO community of supporters, IMHO knockout.js (or similar) is a good choiche, as already pointed out in a previous answer.
If you just only need to display data in a simple and straightforward manner, nano is the smallest template engine you could find, so, here is a simple JQM stub with two pages using this approach:
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>
这篇关于如何从json创建100个html项目而不创建100个单个html文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!