Question

我一直在寻找使用Mustache模板的简单基本示例，其中Mustache标记和模板保留在HTML文档中（关注点分离）。

我在这里：

<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</head>
<body>
  <div class="container">
    <h2>Here is a person</h2>
    <template id="theTemplate">
      {{name}}
    </template>
  </div>

  <script>
    $(function() {
      template = $('#theTemplate').html();
      data = {
        name: 'billy'
      };
      Mustache.render(template, data);
    });
  </script>
</body>
</html>

没有错误被抛出，但它无效！

Answer 1

Mustache.render返回一个字符串，它是模板和来自提供的对象的数据的合并。它不会对该字符串执行任何其他操作，因此如果要更新DOM，您仍需要手动执行此操作。在使用jQuery时，您可以使用append()来执行此操作：

$('h2').append(Mustache.render(template, data));

但是，在模板中包含整个h2文本值至少使其值得使用会更有意义：

$(function() {
  template = $('#theTemplate').html();
  data = { name: 'billy' };
  $('h2').text(Mustache.render(template, data));
});

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<div class="container">
  <h2></h2>
  <template id="theTemplate">
    Here is a person named {{name}}
  </template>
</div>

小胡子模板 - 基本示例不显示而不是抛出错误

1 个答案: