显示从 JSON 读取的 HTML 模板的标题和描述答案

【问题标题】：Display Heading and Description of a HTML template reading from JSON显示从 JSON 读取的 HTML 模板的标题和描述
【发布时间】：2018-11-21 08:36:27
【问题描述】：

我正在开发一个简单的网页。我有一个以下示例 json 文件和一个 HTML 模板

数据.json

{
  "NAME":"SAMPLE_NAME",
  "ADDRESS":"New Brunswick Avenue"
}

index.html

<div class="name"></div>
<div class="address"></div>

所以我必须在从 json 文件读取的模板上显示名称和地址。有没有我可以使用的图书馆或任何其他方式来实现这一目标？

【问题讨论】：

那么您想为此使用哪种后端语言？ php?
您目前是否使用任何特定的 javascript 库？如果是这样，那么您可能会找到该库的模板示例。如果没有，那么您将不得不 JSON.parse(jsonText) 到一个对象并使用 javascript 创建一个 dom 结构来显示数据。
目前没有使用任何后端，它是一个简单/基本的 HTML 模板。

标签： html json

【解决方案1】：

我认为您正在寻找编译时模板或预编译模板引擎之类的东西。您可以使用 html、css 并使用 javascript 或 jquery 来更改某些元素的文本，但如果您的页面很大，这将需要很长时间。

但是有一个库可以做这样的事情，它叫做 Handlebars。

这是一个链接：http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro

这可能会让您了解它的作用：What is the difference between handlebar.js and handlebar.runtime.js?

这是一个使用您的 html 的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    // Load your html / template into this variable
    var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
    var jsonData = {
      "name":"John",
      "address": "City Street"
    }
    var compiledTemplate = Handlebars.compile(template);
    // The output html is generated using 
    var html = compiledTemplate(jsonData);
    document.getElementsByTagName('body')[0].innerHTML = html;
  </script>
</body>
</html>

如果您希望在 javascript 变量之外编写 html，您也可以这样做：

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div id="template">
    <div class="name">{{name}}</div>
    <div class="address">{{address}}</div>
  </div>

  <script>
    // Load your html / template into this variable
    var template = document.getElementById('template').innerHTML;
    var jsonData = {
      "name":"John",
      "address": "City Street"
    }
    var compiledTemplate = Handlebars.compile(template);
    // The output html is generated using 
    var html = compiledTemplate(jsonData);
    document.getElementById('template').innerHTML = html;
  </script>
</body>
</html>

【讨论】：

正是我需要的。谢谢！！