How to create html from json for 100 items without creating 100 single html files?

问题

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

回答1:

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>

回答2:

You should consider building it as a SPA using a simple binding library like KnockoutJS. This will allow you to update the data using a single page.

SPA Tutorial using Knockout (click the dropdown and select "Single Page Applications"):

http://learn.knockoutjs.com/#/?tutorial=webmail

Download the library here: http://knockoutjs.com/

Of course you could use a robust framework like Angular, but that is really not necessary for just setting up some simple AJAX data bindings.

来源：https://stackoverflow.com/questions/43895081/how-to-create-html-from-json-for-100-items-without-creating-100-single-html-file

标签

jquery

html5

cordova

jquery-mobile

frontend