Question

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

data.json

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

index.html

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

所以我必须在从json文件读取的模板上显示名称和地址。我可以使用任何库来完成此任务吗？

Answer 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>

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

1 个答案: