jquery – 如何从json为100个项目创建html而不创建100个单个html文件？

我开发了一个带有phonegap和jquery mobile的应用程序.
我有100个项目,需要单页. html对所有人来说都是一样的.它只是显示名称和一些信息.
如何解析我的html中的1个项目并显示信息而不创建100个单个html文件？我把所有的信息都当作json.

编辑：用户点击这100个项目中的一个,然后将出现新页面

解决方法

您可能需要一种模板,您可以自己动手或使用统一的方法.只需在互联网上搜索“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>

原文地址：https://www.jb51.cc/jquery/180684.html

jquery – 如何从json为100个项目创建html而不创建100个单个html文件？

解决方法

相关推荐