在实现 mustache js 以显示信息时遇到问题答案

【问题标题】：Having trouble implementing mustache js to display information在实现 mustache js 以显示信息时遇到问题
【发布时间】：2017-05-13 00:51:43
【问题描述】：

我正在尝试实现 mustache js 以在网页上显示员工姓名，但我对此感到有些困惑。当我加载网页时，什么都没有出现。如何让信息出现？提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>title</title>
	<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

<script type="text/javascript">
	var data = { depts: [
	  { name:"Accounting",
		employees: [
		  {firstName: "Angela", lastName: "Martin", title: "Senior Accountant"},
		  {firstName: "Kevin", lastName: "Malone", title: "Accountant"},
		  {firstName: "Oscar", lastName: "Martinez", title: "Accountant"}]
	  },
	  { name: "Customer Service",
		employees: [
		  {firstName: "Kelly", lastName: "Kapoor", title: "Customer Service Rep."}]
	  },
	  { name: "Human Resources",
		employees: [
		  {firstName: "Toby", lastName: "Flenderson", title: "Human Resources Manager"}]
		},
	  { name: "Management",
		employees: [
		  {firstName: "Ryan", lastName: "Howard", title: "Vice President, North East"},
		  {firstName: "Michael", lastName: "Scott", title: "Regional Manager"},
		  {firstName: "Dwight", lastName: "Schrute", title: "Assistant Regional Manager"},
		  {firstName: "Jim", lastName: "Halpert", title: "Assistant Regional Manager"}]
	  },
	  { name: "Sales",
		employees: [
		  {firstName: "Andy", lastName: "Bernard", title: "Sales Director"},
		  {firstName: "Phyllis", lastName: "Lapin", title: "Sales Representative"},
		  {firstName: "Stanley", lastName: "Hudson", title: "Sales Representative"}]
	  },
	  { name: "Support",
		employees: [
		  {firstName: "Pamela", lastName: "Beesly", title: "Receptionist"},
		  {firstName: "Creed", lastName: "Bratton", title: "Quality Assurance"},
		  {firstName: "Meredith", lastName: "Palmer", title: "Supplier Relations"}] 
	  }]
	};

	var employeeTmp = "{{#depts}}<h1>{{name}}</h1>" + "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
	var names = {employee: "<li>{{firstName}} {{lastName}}</li>"};
	var html = Mustache.to_html(employeeTmp, data, names);
	$('#display').html(html);
</script>

<div id="display"></div>
</body>
</html>

【问题讨论】：

标签： javascript html templates mustache

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>title</title>
	<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>


<div id="display"></div>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

<script type="text/javascript">
	var data = { depts: [
	  { name:"Accounting",
		employees: [
		  {firstName: "Angela", lastName: "Martin", title: "Senior Accountant"},
		  {firstName: "Kevin", lastName: "Malone", title: "Accountant"},
		  {firstName: "Oscar", lastName: "Martinez", title: "Accountant"}]
	  },
	  { name: "Customer Service",
		employees: [
		  {firstName: "Kelly", lastName: "Kapoor", title: "Customer Service Rep."}]
	  },
	  { name: "Human Resources",
		employees: [
		  {firstName: "Toby", lastName: "Flenderson", title: "Human Resources Manager"}]
		},
	  { name: "Management",
		employees: [
		  {firstName: "Ryan", lastName: "Howard", title: "Vice President, North East"},
		  {firstName: "Michael", lastName: "Scott", title: "Regional Manager"},
		  {firstName: "Dwight", lastName: "Schrute", title: "Assistant Regional Manager"},
		  {firstName: "Jim", lastName: "Halpert", title: "Assistant Regional Manager"}]
	  },
	  { name: "Sales",
		employees: [
		  {firstName: "Andy", lastName: "Bernard", title: "Sales Director"},
		  {firstName: "Phyllis", lastName: "Lapin", title: "Sales Representative"},
		  {firstName: "Stanley", lastName: "Hudson", title: "Sales Representative"}]
	  },
	  { name: "Support",
		employees: [
		  {firstName: "Pamela", lastName: "Beesly", title: "Receptionist"},
		  {firstName: "Creed", lastName: "Bratton", title: "Quality Assurance"},
		  {firstName: "Meredith", lastName: "Palmer", title: "Supplier Relations"}] 
	  }]
	};

	var employeeTmp = "{{#depts}}<h1>{{name}}</h1>" + "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
	var names = {employee: "<li>{{firstName}} {{lastName}}</li>"};
	var html = Mustache.to_html(employeeTmp, data, names);
	$('#display').html(html);
</script>
</body>
</html>

只要把script标签放在div标签下面，一切都会显示出来

【讨论】：

【解决方案2】：

将您的 javascript 代码放入 $(document).ready()。

您的脚本在#display 元素存在之前执行，这就是您的代码不起作用的原因。

检查这个答案：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      
      var data = {
        depts: [{
            name: "Accounting",
            employees: [{
                firstName: "Angela",
                lastName: "Martin",
                title: "Senior Accountant"
              },
              {
                firstName: "Kevin",
                lastName: "Malone",
                title: "Accountant"
              },
              {
                firstName: "Oscar",
                lastName: "Martinez",
                title: "Accountant"
              }
            ]
          },
          {
            name: "Customer Service",
            employees: [{
              firstName: "Kelly",
              lastName: "Kapoor",
              title: "Customer Service Rep."
            }]
          },
          {
            name: "Human Resources",
            employees: [{
              firstName: "Toby",
              lastName: "Flenderson",
              title: "Human Resources Manager"
            }]
          },
          {
            name: "Management",
            employees: [{
                firstName: "Ryan",
                lastName: "Howard",
                title: "Vice President, North East"
              },
              {
                firstName: "Michael",
                lastName: "Scott",
                title: "Regional Manager"
              },
              {
                firstName: "Dwight",
                lastName: "Schrute",
                title: "Assistant Regional Manager"
              },
              {
                firstName: "Jim",
                lastName: "Halpert",
                title: "Assistant Regional Manager"
              }
            ]
          },
          {
            name: "Sales",
            employees: [{
                firstName: "Andy",
                lastName: "Bernard",
                title: "Sales Director"
              },
              {
                firstName: "Phyllis",
                lastName: "Lapin",
                title: "Sales Representative"
              },
              {
                firstName: "Stanley",
                lastName: "Hudson",
                title: "Sales Representative"
              }
            ]
          },
          {
            name: "Support",
            employees: [{
                firstName: "Pamela",
                lastName: "Beesly",
                title: "Receptionist"
              },
              {
                firstName: "Creed",
                lastName: "Bratton",
                title: "Quality Assurance"
              },
              {
                firstName: "Meredith",
                lastName: "Palmer",
                title: "Supplier Relations"
              }
            ]
          }
        ]
      };

      var employeeTmp = "{{#depts}}<h1>{{name}}</h1>" + "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
      var names = {
        employee: "<li>{{firstName}} {{lastName}}</li>"
      };
      var html = Mustache.to_html(employeeTmp, data, names);
      $('#display').html(html);
    });
  </script>

  <div id="display"></div>
</body>

</html>

【讨论】：

【解决方案3】：

你把一些事情搞混了。为了达到你的DIV“显示”，你的身体必须满载。你的脚本将首先被调用，然后是你的身体。我建议您将它们反转如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js">
  </script>
</head>
<body>
  <div id="display"></div>
</body>

<script type="text/javascript">
  // your script here
  $('#display').html(html);
</script>
</html>

【讨论】：